Question

我必须构建一个如下图所示的树形结构。

enter image description here

为此，我使用Ember View并递归调用，根据提供的模型构造整个树状结构。

我的模板是：

<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从服务器加载第一级文件夹。

然后，当单击打开的节点时，通过向服务器调用请求来填充子数组。

现在当模型长度大于3000＆＃34;停止脚本＆＃34;在Firefox浏览器中抛出错误。

在我的树中，节点数没有限制。我该如何解决这个问题。

演示JS Bin（在Firefox中试用）

Answer 1

Ember是一个Web框架。鉴于这些信息，您需要意识到，如果不重用某些视图元素，就无法在浏览器中高效渲染6000个项目。即使是原生应用程序也不会这样做：例如，在iOS中，TableView中的单元格是可重用的，因此显示6000个项目集合的表格只有足够的单元格来覆盖视图的高度和一些滚动重叠。视图知道其滚动位置，并呈现需要从集合中呈现的10-20个项目，当您向下滚动时，它会删除顶部元素，将元素放在底部，并呈现下一个项目数据数组。这样，每个人都赢了。我建议你也这样做，因为JS / HTML无法有效地处理那么多元素。

我知道这不是一个有趣的实现，但是一旦你想出了第一次这样做的组件，你会很高兴你做到了。

尊敬的提及：https://github.com/emberjs/list-view。你正在做一个文件树，而不是一个列表，这比一个很长的列表更困难，但如果你稍微改变你的UI，你仍然可以使用它。如果您具有可通过树导航的文件夹结构并在列表视图中显示文件，则可能会缓解您的问题，具体取决于问题是针对多个文件还是多个文件夹。

Answer 2

这不是真正的Ember问题，而是一般的javascript问题。当脚本花费很长时间执行时，浏览器会显示/触发此类错误消息，并且每个浏览器都会有不同的消息。

您可以阅读this good blog post about long time runing scripts

如果您的浏览器环境不受控制（我的意思是您的计算机是我们公司的计算机），您仍然可以setup firefox to run longer scripts

但是，一个好的做法是在子任务中“分割”脚本，花费更少的时间来执行。

修改

在评论中讨论的屁股是由于你产生了大量的观点。您可以从后端返回6000个模型，但一次生成6000个视图很重。

以下是关于如何处理此问题的建议：http://jsbin.com/zakisoyesi/6/edit?html,js,output可以让您根据自己的使用案例和事件进行调整，以便通过使用onScroll或任何其他事件使其对用户透明。

Ember View - 递归视图调用throws Stop Script Error

2 个答案: