Javascript MustacheJS使用partials呈现嵌套JSON
我正在尝试使用mustachepartials呈现嵌套(可以是多级)JSON。它只渲染到第二级,不会渲染到第三级或更高。根据定义,分部可以用于递归渲染。我做错了吗?或者有没有其他方法可以通过使用胡子来达到同样的效果 模板: 渲染: 输出(缺失产品:Nexus 4、Nexus 5、ipod、iphone) 从MustacheJS维护者那里 工作 我可以使用Javascript MustacheJS使用partials呈现嵌套JSON,javascript,html,json,mustache,partials,Javascript,Html,Json,Mustache,Partials,我正在尝试使用mustachepartials呈现嵌套(可以是多级)JSON。它只渲染到第二级,不会渲染到第三级或更高。根据定义,分部可以用于递归渲染。我做错了吗?或者有没有其他方法可以通过使用胡子来达到同样的效果 模板: 渲染: 输出(缺失产品:Nexus 4、Nexus 5、ipod、iphone) 从MustacheJS维护者那里 工作 我可以使用产品列表模板,因为产品列表和递归列表都是相似的:$('body').html(Mustache.render(productList.html
产品列表
模板,因为产品列表
和递归列表
都是相似的:$('body').html(Mustache.render(productList.html(),data,{recurse:productList.html()})代码>
但是,如果您这样做,您将得到超出最大调用堆栈大小的,这可能是您无法预料的。这是因为,通过像您这样构造数据和模板,您创建了无限递归。在尾部产品(如Nexus 4、Nexus 6、iPod等)中,模板将查找产品
属性,但找不到它。因此,它将返回上下文堆栈,并检查每个级别,直到找到具有product
属性的内容。您可以通过确保叶产品的product
属性的值为false、null或[]
来停止此操作
新数据:
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
}]
}]
}]
};
即使我也面临着类似的问题,请帮助我。
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()}) );
Category1
- Windows
- Windows Mobile
Category2
- SubCategory 1
- SubCategory 2
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
}]
}]
}]
};