多くのネストされたレイヤーを持つデータを使用したテンプレート

Question

私はいくつかのCouchDBアプリケーションで作業しています。私はテンプレート作成にMustache.jsを使う方法も学んでいます。私の質問は、あなたのデータに入れ子になったレイヤーがたくさんある場合、テンプレート作成に最適なアプローチは何ですか。ここに例があります：

var jsondata = { 
    post1: { 
    title: "First blog post", 
    author: "John", 
    tags: ["awesome", "interesting", "philosophical"], 
    comments: { 
     julie: "I love it!", 
     mark: "I hate it!" 
    } 
    }, 
    post2: { 
    title: "Second blog post", 
    author: "Jill", 
    tags: ["extraordinary", "crazy", "nice"], 
    comments: { 
     julie: "I love it!", 
     mark: "I hate it!" 
    } 
}; 

私はそれがデータのユニークな構造に依存していることを認識していますが、一般的なアプローチはうまくいきますか？私が検討しているものを次に示します：

• トップレベルの配列のコレクションを持つように、セットからネストされたデータを抽出し、ヘルパー関数を使用してそれらをテンプレートにコンパイルします。
• テンプレートをビルドしてデータをミラー化し、$ .each、テンプレート化、および正規表現のクレイジーな組み合わせを使用して、テンプレートをワンショットでコンパイルします。
• コンパイルを分割して、完全に完了するまで数回テンプレートを通過させます。

私はここでかなり失われています、いくつかの助けを愛するでしょう！

PS：私は、ブログの投稿、コメント、タグを別々のjsonドキュメントに分割し、それらをcouchdbのビューとリストと一緒に引っ張っていく予定ですので、結果のデータ構造についてはまだ不明です。

Answer 1

まず、あなたが今持っているものをわずかな変更で（既知のキーを持つ必要があるコメントを表示するために）使用することができます。あなたが入力を変更できない場合、私はあなたがそのヘルパー関数を書くことができますHandlebars.jsのために行くお勧め

<script type="text/javascript"> 
    $(function() { 
     var posts = {blogs:[ 
      { 
       title:"First blog post", 
       author:"John", 
       tags:["awesome", "interesting", "philosophical"], 
       comments:[ 
        {name:"juli", comment:"I love it"}, 
        {name:"foo", comment:"bar"} 
       ] 
      }, 
      { 
       title:"Second blog post", 
       author:"Jill", 
       tags:["extraordinary", "crazy", "nice"], 
       comments:[ 
        {name:"juli", comment:"I love it"}, 
        {name:"foo", comment:"bar"} 
       ] 
      } 
     ]}; 
     var template = $("#template").html(); 
     var output = Mustache.render(template, posts); 
     console.log(output); 
    }); 
</script> 
<script id="template" type="x-template"> 
    {{#blogs}} 
    <div>{{title}}</div> 
    <div>{{author}}</div> 
    <ul> 
     {{#tags}} 
     <li>{{.}}</li> 
     {{/tags}} 
    </ul> 
    <ul> 
     {{#comments}} 
     <li>{{name}}: {{comment}}</li> 
     {{/comments}} 
    </ul> 
    {{/blogs}} 
</script> 

：あなたがエンジンに渡したいデータを変更することができる場合は、このような何かを行うことができますテンプレートデータからキーバリューを抽出します。

詳細はthis exampleでMichael Miorをご覧ください。

テンプレートを分割するパーシャルを使用することを検討して、多くのネストされた層

データは、多くのネストされたレイヤーが含まれていでの作業。たとえば、タグ用の作成者用のテンプレートと、コメント用のテンプレートとネスト用のテンプレートがあります。

//Blog template 
{{#blogs}} 
    {{title}} 
    ... 
    //delegate rendering of tags to a partial template 
    {{> tags}} 
    {{> comments}} 
{{/blogs}} 

Mustache docにはパーシャルの使用に関する詳細情報が含まれています。