ポップアップでのHTMLテキストの管理

Question

私はOpenLayerポップアップを使用しています。 初期化時に、ポップアップに表示されるhtmlを含むために必要なパラメータがあります。 このパラメータはjavascript文字列です。

私は矛盾していますが、一方ではhtmlテキストが長いので、htmlファイルに配置してファイルを変数に読み込むことをお勧めします。

一方、htmlは他のローカル変数に依存するので、私はその場所に置いておくと、いくつかの文字列とローカル変数を連結して、htmlテキストを含む最終変数を構成することができます。しかし、それは非常に長く醜いコードです...

多分、経験豊富なJavaScriptプログラマーが私にこの問題の設計ソリューションを見つけるのを助けることができますか？

おかげ

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

もう1つの解決策は、ファイルをロードしてポップアップ内にコンテンツを印刷するための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); 
}); 

Ajaxリクエストが完了すると、ポップアップを作成して、以前にロードされたファイルの内容とそれを埋めることができます：jQueryのを使用して

。

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});