jQuery UI:HTML マークアップをロードする最良の方法は?

StackOverflow https://stackoverflow.com/questions/354473

質問

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

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

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

役に立ちましたか？

解決

を行うにはかなりきちんとしているものはこれです：

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

そのように、あなたは要素を作成している、と後で使用するために、変数にその参照を格納します。

他のヒント

大量の複雑な HTML があり、JavaScript コードでハードコードされた文字列を処理したくない場合は、それを別の HTML ファイルに入れて、 Ajaxロード関数.

チェーン可能であるため、HTML ファイル (全体または選択したフラグメント) をロードし、それを現在の DOM に挿入して、そのまま作業を続けることができます。

私は後でアクセスするためにJSONオブジェクト内の文字列としてHTMLのブロックを格納よ、本当に複雑なテンプレートのための多くの時間...例えばます：

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ウィジェットやデザインが根本的に周りに変化する可能性があるそういったこと、と私のためによく働いています。

マークアップは、ブラウザによってレンダリングされないように、

人気の、効率的な方法は、スクリプトタグでページの下部に出力（後で必要になる場合があり何でも）あなたの追加のマークアップのすべてにある。

<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のものの一つ： jQueryのテンプレートエンジンの

お楽しみに！

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top