MustacheJS 渲染嵌套 JSON 使用部分

Question

我正在尝试使用 Mustache 局部渲染我的嵌套（可以是多级）JSON。它只渲染到第二级，而不是第三级和更高级别。根据定义，部分可用于递归渲染。我做错了吗？或者有没有其他方法可以使用小胡子实现同样的效果？

Template:

<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>

Data:

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"
            }]
        }]
    }]
};

Rendering:

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

Output (missing products: Nexus 4, Nexus 5, ipod, iphone)

Category1

 - Windows
 - Windows Mobile

Category2

 - SubCategory 1
 - SubCategory 2

Answer 1

Got the solution 来自 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
                }]
            }]
        }]
    };

MustacheJS 渲染嵌套 JSON 使用部分

MustacheJS rendering nested JSON using partials

javascript

html

json

mustache

partials