팝업에서 HTML 텍스트 관리

Question

OpenLayer 팝업을 사용하고 있습니다. 초기화 할 때 팝업에 표시되는 html을 포함하는 데 필요한 매개 변수가 있습니다. 이 매개 변수는 javascript 문자열입니다.

나는 충돌이있다. 한편으로는 html 텍스트가 길어서 html 파일에 배치하고 파일을 변수에 읽는 것을 선호한다.

반면에 html은 다른 지역 변수에 따라 달라 지므로 그 자리에 남겨두면 일부 문자열과 로컬 변수를 연결하여 html 텍스트가 포함 된 최종 변수를 구성 할 수 있습니다. 하지만 그것은 매우 길고 못생긴 코드입니다 ...

혹시 경험 많은 자바 스크립트 프로그래머가이 문제에 대한 설계 솔루션을 찾도록 도와 줄 수 있습니까?

감사

Answer 1

당신이 당신의 서버에서 HTML을 검색 할 OpenLayers.loadURL 기능을 사용할 수 있습니다 OpenLayers를 사용하는 것처럼.

http://dev.openlayers.org/releases/OpenLayers-2.10/doc/apidocs/files/OpenLayers/Ajax-js.html

당신이 변수를 받아들이고, (문자열 형식 또는 템플릿을 사용하여) 일부 정적 HTML로 이들을 통합하는 간단한 핸들러를 설정할 수 있습니다 서버 측 HTML에 지역 변수를 전달하려면

.

. NET을 사용하는 경우 .ashx 파일에서이 작업을 수행 할 수 있습니다. 예를 들어 http://dotnetperls.com/ashx을 참조하십시오.

Answer 2

또 다른 해결책은 파일을로드하고 팝업 안에 내용을 인쇄하는 Ajax 요청을 사용하는 것입니다. jQuery를 사용하여

: Ajax 요청이 완료되면

$.get('myfile.php',function(content){ 
    var popup = new OpenLayers.Popup("popupid", 
     new OpenLayers.LonLat(mouseX,mouseY),   
     new OpenLayers.Size(360,200),    
     content, 
     true); 
    map.addPopup(popup); 
}); 

, 당신은 팝업을 생성하고 이전에로드 된 파일 내용으로 채울 수 있습니다.

Answer 3

geographikas 솔루션을 권하고 싶습니다. 관리 성 및 가독성을 높이기 위해 다른 js 클래스를 사용해보십시오. 동일한 객체에서 모든 것을 수행하지 말고 OpenLayers.Popup.Anchored 또는 다른 것을 상속하거나 사용하는 팝업 객체를 만들고 Ajax 서버를 호출하십시오. 이렇게하면 다른 코드를 혼란스럽게하지 않아도됩니다. 필요한 경우 재사용 및 대체하기가 쉽습니다. 나는이 같은 뭔가를 갈 것

(안된!)라는 파일에

mynamespace.mypopup = function(o) { 

    var size = new OpenLayer.Size(100, 70); 
    var icon = new OpenLayers.Icon(); // Fill it 
    var popup = new OpenLayers.Popup.Anchored(o.id, o.lonlat, size, getContent(), icon, false, null); 

    var getContent = function() { 
     // ajax call 
     // return a string 
    } 

    return popup; 
} 

"mypopup.js"

과 함께 전화 :

var popup = new mynamespace.mypopup({id: 'whatever', lonlat: myLonLat});