3

以下のようにネストされた json を jsrender/jsviews でループするにはどうすればよいですか?

var data = {  
    nested: {
        page: {
            type: "X",
            items: {
                "0":{"title":"page - hello"},
                "1":{"title":"page - world"}
            }
        },
        post: {
            type: "Y",
            items: {
                "0":{"title":"post - hello"},
                "1":{"title":"post - world"}
            }
        }  
    }

};

テンプレート、

{{for nested}}
<div>
    <h1>Type: {{ :type }}</h1>
    {{for items}}
    <p>Title:  {{:title}} </p> 
    {{/for}}
</div>
{{/for}}

結果、

Type: {{ :type }}

私が求めているもの、

Type: X
Title - page - hello
Title - page - World

Type: Y
Title: post - hello
Title: post - World
4

2 に答える 2

4

更新された応答:

JsRender と JsViews には、{{props}}フィールドを反復処理するためのタグがあり、こちらに記載されています。

上記で要求されたデータと出力の例については、次のテンプレートを使用して実行できます。

<script id="myTmpl" type="text/x-jsrender">

{{props nested}}
  <div>
    <h1>Type: {{:prop.type}}</h1>
    {{props prop.items}}
      <p>Title: {{:prop.title}}</p>
    {{/props}}
  </div>
{{/props}}

</script>

そして、次のコード:

var myTmpl = $.templates("#myTmpl");

var data = {  
  nested: {
    page: {
      type: "X",
      items: {
        "0":{"title":"page - hello"},
        "1":{"title":"page - world"}
      }
    },
    post: {
      type: "Y",
      items: {
          "0":{"title":"post - hello"},
          "1":{"title":"post - world"}
      }
    }
  }
};

var html = myTmpl.render(data);

ここにjsfiddleがあります

于 2014-01-03T02:30:31.853 に答える