jquery - JsRender/ JsViews：如何循环嵌套的 json？

Question

如何使用 jsrender/jsviews循环像下面这样的嵌套 json？

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

Answer 1

更新回复：

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

Answer 2

我认为您遇到的问题是您在数据中声明一个对象而不是数组。用下面的数据试试。

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

  };

这种方式嵌套是一个数组，for 应该能够循环它。