jQueryを使用して複雑なHTMLフラグメントを動的に作成する

Question

jQueryを使用して、半複雑なHTML div要素を生成する（または少なくともJSONデータでテンプレートを入力してリストに追加する）。データはJSON形式（重要な場合）であり、各親エントリについて、別のdivをカルーセル型要素に追加したいと考えています。など

長い声明：

$('#list').append('<li><div id=" + entry.id +"><span id="highlight> + entry.name + <span/><div id="picture" .... 

は、（それだけでポイントを作ることだが言い訳エラーを）動作しますが、維持するために硬すぎるだろう。より効率的な方法が必要です。

ありがとうございました。

Answer 1

あなたはjavascriptのテンプレート言語に探している - トンはそこにあります

• underscore.js。
• mustache.js;
• jade;
• handlebars.js;
• より多くの...

アイデアは、データを保持することであり、別のそのビュー：

<p>Hello <strong><%=user.name %> <%=user.lastname %></strong></p> 

で：

var myUser = { name : 'John', lastname : 'Doe' }; 

$('#awesomeDiv').html(
    someTemplateFunction({ user : myUser }) 
); 

そしてsomeTemplateFunction()のようなそのボディの何かに開催しますholding私は、テンプレートライブラリがそのようなテンプレートを解析できることを意味しています[DOMまたは外部ファイルから来て]新しいDOM要素にレンダリングすることができます。

私の選択はアンダースコア.jsです。これは非常に最小限で便利なライブラリだから、気軽に見てください。

Answer 2

あなたはテンプレートを探しています。多くのがあります。

• Handlebars
• Hogan
• dust.js
• Mustache
• underscore templates
• jQuery templates

Answer 3

それはあなたが「何のために働くかどうか分からないのですか私は似たような問題を抱えていたので、私は自分のjsをhtmlで挿入したいとは思っていませんでした。私の解決策は、ページにすべてのhtmlを挿入し、必要に応じて公開するか、場合によっては必要なdivをコピーするように、非表示にすることでした。