【发布时间】：2015-03-13 04:39:52
【问题描述】：
我必须构建一个如下图所示的树结构。
为此，我使用 Ember 视图并递归调用以基于提供的模型构建整个树状结构。
我的模板是：
<script type="text/x-handlebars" data-template-name="index">
<div class="zd-fldr fleft" style="width:230px;">
<ul class="fldr-sub">
{{#each item in model}}
{{view App.FoldertreeView model=item contentBinding="item"}}
{{/each}}
</ul>
</div>
</script>
<script type="text/x-handlebars" data-template-name="foldertree">
{{#if item.subfolder }}
<span {{action 'getSubFolder' item}} {{bind-attr class="item.IS_OPENED:fdtree-icon:ftree-icon"}}> </span>
{{else}}
<span class=""> </span>
{{/if}}
<span style="padding-top:20px;" class="fdetail fleft" >{{item.FOLDER_NAME}}</span>
<ul style="margin-top:30px;" {{bind-attr class="item.IS_OPENED:showdiv:hidediv"}}>
{{#each item in item.children}}
{{view "foldertree" model=item contentBinding="item"}}
{{/each}}
</ul>
</script>
JavaScript：
App.IndexRoute = Ember.Route.extend({
model: function() {
var treeArray = [];
for(var i=0; i<4000; i++){
var temp_obj = { 'FETCHED_DATA': false, 'FOLDER_ID': i, 'FOLDER_NAME': 'Folder_'+i, 'IS_OPENED': false, 'opened': true, 'subfolder': true, 'children': [] };
treeArray.push(temp_obj);
}
return treeArray;
}
});
App.FoldertreeView = Ember.View.extend({
tagName: 'li',
templateName: 'foldertree',
classNames: ['treediv', 's-fldr']
});
最初我通过调用 API 仅从服务器加载第一级文件夹。
然后当点击打开的节点时，通过向服务器调用请求来填充children数组。
现在当模型长度大于 3000 时，Firefox 浏览器会抛出“Stop Script”错误。
在我的树中，节点的数量没有限制。我该如何解决这个问题。
演示 JS Bin（在 Firefox 中试用）
【问题讨论】：
-
你不觉得for循环循环太大了。我建议你保持小。以后可以根据需要添加或推送更多对象。
-
我遇到了几乎相同的问题，尽管我使用的是局部视图而不是视图。还在追查。我怀疑这是 Ember/HBS 中的一个错误。
-
我对你的问题感到困惑。您提到“递归”，但您发布的代码似乎只是在执行单级 4000 个元素，因此
{{#each item in item.children}}循环将永远不会执行 AFAICT。您不是在测试 Ember 处理递归视图的能力，而是测试处理许多视图的能力。我自己用一个包含 10000 个元素的模型测试了 Ember，每个模型都使用一个视图显示，并且它很快就耗尽了 gas。构建视图的开销是巨大的。您可能想尝试使用局部变量。 -
@torazaburo 如果有子对象，它将被添加到将递归运行的子数组中。这样我就可以像所附图像一样拥有树状结构。现在渲染第一级模型本身（没有子对象）我得到了停止脚本错误。
-
由于浏览量巨大，您遇到了停止脚本错误。如果我理解您要正确执行的操作，您应该对三个对象进行测试，每个对象都有三个孩子，依此类推，递归一些级别。这将分离出两个问题：(1) 递归视图是否正常工作，以及 (2) Ember 可以处理多少视图，与平面或嵌套无关。