Question

我正在尝试使用Mustache partials渲染我的嵌套（可以是多级）JSON。它只渲染到第二级，它不是第三级＆amp;更大。根据定义，partials可用于递归呈现。我做错了吗？还是有其他方法可以使用小胡子来实现相同目的吗？

模板：

<script id="product-list" type="x-tmpl-mustache">
  <ul class='products'>
    {{#product}}
      <li class='product'> {{ productName }} </li>
      {{> recurse }}
    {{/product}}
    {{^product}}
      <li class='empty'> No products Available </li>
    {{/product}}
  </ul>
</script>

<script id="recursive-list" type="x-tmpl-mustache">
  <ul class='products'>
    {{#product}}
      <li class='product'> {{ productName }} </li>
    {{/product}}
  </ul>
</script>

数据：

var data = {
    product: [{
        productName: "Category1",
        product: [{
            productName: "Windows"
        }, {
            productName: "Windows Mobile"
        }]
    }, {
        productName: "Category2",
        product: [{
            productName: "SubCategory 1",
            product: [{
                productName: "Nexus 4"
            }, {
                productName: "Nexus 6"
            }]
        }, {
            productName: "SubCategory 2",
            product: [{
                productName: "ipod"
            }, {
                productName: "iphone"
            }]
        }]
    }]
};

渲染：

$('body').html( Mustache.render( productList.html(), data, {recurse :recursiveList.html()}) );

输出（缺少产品：Nexus 4，Nexus 5，ipod，iphone）

Category1

 - Windows
 - Windows Mobile

Category2

 - SubCategory 1
 - SubCategory 2

Answer 1

来自MustacheJS维护者的

Got the solution，

工作JSBin

我可以使用product-list模板，因为product-list和＆amp; recurisve-list类似：$('body').html(Mustache.render(productList.html(), data, {recurse: productList.html()}));

但是，如果你这样做，你会得到maximum call stack size exceeded，这可能是你不可能的。这是因为，通过按照您的方式构建数据和模板，您创建了无限递归。在尾部产品（如Nexus 4，Nexus 6，iPod等）中，模板将查找product属性而无法找到它。因此它将返回上下文堆栈，并检查每个级别，直到找到具有product属性的内容。您可以通过确保leaf产品的product属性值为false, null or []来阻止此操作。

新数据：

var data = {
        product: [{
            productName: "Category1",
            product: [{
                productName: "Windows",
                product: null
            }, {
                productName: "Windows Mobile",
                product: null
            }]
        }, {
            productName: "Category2",
            product: [{
                productName: "SubCategory 1",
                product: [{
                    productName: "Nexus 4",
                    product: null
                }, {
                    productName: "Nexus 6",
                    product: null
                }]
            }, {
                productName: "SubCategory 2",
                product: [{
                    productName: "ipod",
                    product: null
                }, {
                    productName: "iphone",
                    product: null
                }]
            }]
        }]
    };

MustacheJS使用partials

1 个答案: