自从发现 Ractivejs 以来,我正在慢慢地将我的应用程序转移到它上面。
在我使用普通 JavaScript 构建 html 树结构来创建元素,然后在完成后将其附加到页面之前。我最近将其转移到 Ractivejs,它在小型树结构中工作得非常好,但如果涉及深度嵌套的对象,它会超出调用堆栈。
有没有一种方法可以将我在 JavaScript 中构建的元素附加到 Ractivejs 模板并在其上保留 Ractivejs 事件,或者有没有一种方法可以递归地循环大对象而不超出调用堆栈?
示例
如何用 JavaScript 构建树
var tree = {
'childPages' : [{
'name': 'first child',
'childPages': []
}, {
'name': 'second child',
'childPages': [{
'name': 'second first sub child',
'childPages': []
}]
}, {
'name': 'third child',
'childPages': [{
'name': 'third first sub child',
'childPages': [{
'name': 'sub sub child',
'childPages': []
}]
}]
}]
};
function buildTree (tree) {
var ul = document.createElement('ul');;
for(var i =0; i < tree.childPages.length; i++){
var li = document.createElement('li');
li.innerText = tree.childPages[i].name;
ul.appendChild(li);
if (tree.childPages[i].childPages.length) {
li.appendChild (buildTree(tree.childPages[i]));
}
}
return ul;
}
document.body.appendChild(buildTree(tree));
如何在 Ractivejs 模板中构建树
var ractive = new Ractive({
el : 'body',
template: '#treeNode',
data: {
'childPages' : [{
'name': 'first child',
'childPages': []
}, {
'name': 'second child',
'childPages': [{
'name': 'second first sub child',
'childPages': []
}, {
'name': 'second second sub child',
'childPages': []
}]
}, {
'name': 'third child',
'childPages': [{
'name': 'third first sub child',
'childPages': [{
'name': 'sub sub child',
'childPages': []
}]
}]
}]
}
});
<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<script id="treeNode" type="text/ractive">
<ul>
{{#each childPages}}
<li>
{{name}}
{{#if childPages}}
{{> treeNode}}
{{/if}}
</li>
{{/each}}
</ul>
</script>
最佳答案
通常,当您超出调用堆栈时,这是因为 Ractive 处理丢失数据属性的方式 - 如果您有 {{with foo}}{{bar}}{{/with}}
和foo.bar
不存在,{{bar}}
引用未解析,因此它“进入上下文堆栈”,并查找 bar
相反。
大多数时候这确实很方便,但在这种情况下可能会出现问题,因为如果树中的某个项目没有 childPages
属性,Ractive 会在堆栈中向上到达父级 - 这将我们送入无限递归兔子洞。
有两种解决方案:
- 确保树中的每个节点都有
childPages
属性,即使它是一个空数组,或者... - 使用受限引用。如果您使用
this.childPages
而不仅仅是childPages
(或./childPages
- 这是等效的,您可能对其中一个有审美偏好)然后 Ractive 不会在当前上下文之外查找数据。这是一个例子,其中所有空childPages
数组已删除 - 没有this.
,我们立即超出了调用堆栈,但因为它在那里,所以我们是完全安全的。
var ractive = new Ractive({
el : 'body',
template: '#treeNode',
data: {
'childPages' : [{
'name': 'first child'
}, {
'name': 'second child',
'childPages': [{
'name': 'second first sub child'
}, {
'name': 'second second sub child'
}]
}, {
'name': 'third child',
'childPages': [{
'name': 'third first sub child',
'childPages': [{
'name': 'sub sub child'
}]
}]
}]
}
});
<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<script id="treeNode" type="text/ractive">
<ul>
{{#each this.childPages}}
<li>
{{name}}
{{#if this.childPages}}
{{> treeNode}}
{{/if}}
</li>
{{/each}}
</ul>
</script>
关于javascript - Ractivejs 中的递归部分超出调用堆栈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30166473/