2

カスタムjQuery UIウィジェットのHTMLマークアップをロードする最良の方法は何ですか?

これまでのところ、文字列 (つまり$(...).wrap('<div></div>')) を使用して単純に作成された要素を見てきましたが、これは単純なものには問題ありません。ただし、これにより、後でより複雑な要素を変更することが非常に困難になります。

これはかなり一般的な問題のように思えますが、jQuery UI ライブラリが十分に新しいため、広く受け入れられている解決策がない可能性があることも知っています。何か案は？

4

4 に答える 4

5

これを行うには非常にきちんとしたものがあります：

var newDiv = $("<div></div>"); //Create a new element and save a reference
newDiv.attr("id","someid").appendTo("body");

このようにして、要素を作成し、その参照を変数に格納して、後で使用できるようにします。

于 2008-12-09T22:49:44.760 に答える
2

大量の複雑な HTML があり、JavaScript コードでハードコーディングされた文字列を処理したくない場合は、それを別の HTML ファイルに入れて、Ajax ロード機能を使用できます。

連鎖可能であるため、HTML ファイル (全体または選択したフラグメント) をロードし、現在の DOM に挿入して、そのまま続行できます。

于 2009-09-21T22:45:22.777 に答える
1

非常に複雑なテンプレートの多くの場合、後でアクセスできるように、HTML ブロックを文字列として JSON オブジェクトに保存するだけです。例:

var temp = {
  header : "<div class='foo'><h3>{HEADER}</h3></div>",
  content : "<div class='bar'><p>{COPY}</p></div>"
}

そして、物事が戻ってきたら、それらを交換するだけです。そうすれば、マークアップはデータをロードするロジックから多少分離されるため、テンプレートの交換などは少し速くなります。

var text = "I am the header text";
var head = new String(temp.header);
$(target).append(head.replace("{HEADER}",text));

とにかく、このアプローチは、デザインが根本的に変わる可能性がある AJAX ウィジェットなどでうまく機能しています。

于 2009-09-21T22:19:38.227 に答える
0

一般的で効率的な方法は、追加のマークアップ (後で必要になる可能性があるもの) をすべてスクリプト タグでページの下部に出力し、マークアップがブラウザーによってレンダリングされないようにすることです。

<script type="text/template" id="template-example">
    <!-- All of your markup here -->
    <% // do some JavaScript in here... %>
    <%= echo_this_variable %>
</script>

その後、jQuery を使用してマークアップを取得できます...

var markup = $('#template-example').html();

そして、Underscore.jsのテンプレート エンジン(これをお勧めします)、またはこの回答の jQuery の 1 つなどのテンプレート エンジンを使用して、そこに投げ込んだ JS の例を解析します: jQuery テンプレート エンジン

楽しむ！

于 2013-01-27T22:46:33.240 に答える