Javascript Ractivejs中的递归部分调用堆栈

自从发现了Ractivejs，我正在慢慢地将我的应用程序转移到它上面

在此之前，我使用香草JavaScript构建了一个html树结构来创建元素，然后在完成后将其附加到页面中。我最近把它转移到了Ractivejs，它可以很好地处理一个小的树结构，但是如果它涉及到一个嵌套很深的对象，它就超出了调用堆栈

有没有一种方法可以将我在JavaScript中构建的元素附加到Ractivejs模板中，并将Ractivejs事件保留在模板上，或者有没有一种方法可以在不超过调用堆栈的情况下递归地在大型对象上循环

例子

如何在JavaScript中构建树

var树={
“子页面”：[{
'姓名'：'第一个孩子'，
“子页面”：[]
}, {
'姓名'：'第二个孩子'，
“儿童网页”：[{
'name'：'second first sub-child'，
“子页面”：[]
}]
}, {
'姓名'：'第三个孩子'，
“儿童网页”：[{
'name'：'third first sub child'，
“儿童网页”：[{
'name'：'sub-sub-child'，
“子页面”：[]
}]
}]
}]
};
函数构建树（树）{
var ul=document.createElement（'ul'）；；
对于（var i=0；idocument.body.appendChild（buildTree（tree））通常，当您超出调用堆栈时，这是因为Ractive处理缺少数据属性的方式-如果您有
{with foo}}{{bar}{{/with}}
和
foo.bar
不存在，则
{bar}
引用无法解析，因此它“进入上下文堆栈”，并查找
bar

大多数情况下，这确实很方便，但在这种情况下，这可能会有问题，因为如果树中的某个项没有
childPages
属性，Ractive将沿着堆栈向上到达父级-这将使我们陷入无限递归兔洞

有两种解决方案：


确保树中的每个节点都有一个
childPages
属性，即使它是一个空数组，或者
使用受限引用。如果您使用
this.childPages
而不是仅使用
childPages
（或
/childPages
-这是等效的，您可能会对其中一个有审美偏好），则Ractive不会在当前上下文之外查找数据。下面是一个例子，删除了所有空的
子页面
数组-没有
this.
，我们立即超过了调用堆栈，但因为它在那里，我们是完全安全的


var-ractive=新的ractive({
el:‘身体’，
模板：“#树节点”，
数据：{
“子页面”：[{
“姓名”：“第一个孩子”
}, {
'姓名'：'第二个孩子'，
“儿童网页”：[{
“名称”：“第二个第一个子项”
}, {
“名称”：“第二个子项”
}]
}, {
'姓名'：'第三个孩子'，
“儿童网页”：[{
'name'：'third first sub child'，
“儿童网页”：[{
“name”：“sub-sub-child”
}]
}]
}]
}
});


{{{每个this.childPages}

{{name}}
{{#如果这个.childPages}
{{>treeNode}
{{/if}

{{/每个}}

非常感谢，它现在做任何事情都非常快！在对象中还发现了一些循环引用。。。因此，所有这些优化协同工作都很好：拇指支持：