MustacheJS使用partials渲染嵌套的JSON

Question

我试图使用Mustache部分渲染我的嵌套(可以是多级)JSON.它只渲染到第二级,它不是第三级和更高级.根据定义,partials可用于递归呈现.我做错了吗？或者有没有其他方法来实现相同的胡子？

JS Bin

模板:

<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 维护者那里得到了解决方案，

工作JSBin

我可以只使用product-list模板，因为product-list&recurisve-list都很相似：$('body').html(Mustache.render(productList.html(), data, {recurse: productList.html()}));

但是，如果您这样做，您将得到一个maximum call stack size exceeded您可能意想不到的结果。这是因为，通过按照您的方式构建数据和模板，您已经创建了无限递归。在尾部产品（如 Nexus 4、Nexus 6、iPod 等）中，模板将查找属性product但找不到它。因此，它将返回上下文堆栈，并检查每个级别，直到找到具有product属性的内容。您可以通过确保叶产品具有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
                }]
            }]
        }]
    };