How many Views can Ember handle: Both flat and nested


#1

I am constructing a Tree like structure in my project. For this I use Ember View to render the model. When there are child nodes I recursively call the View to construct the whole tree.

My questions are:

  1. How many Views can Ember handle with single level model having objects of 4000 or more at times.
  2. How many Views can Ember handle when calling recursively with nested model of 4000 or more at times.

When I call the View to render my model (3000 to 4000 length) “Stop Script” error is thrown in Firefox.

My Templates:

<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 "foldertree" 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']
}); 

How can I overcome this “Stop Script” error when I render large number of Tree nodes.

JSBIN Link

I have asked the same question in SO - SO Link

1: http://stackoverflow.com/questions/27917943/ember-view-recursive-view-call-throws-stop-script-error/27920266?noredirect=1#comment44269974_27920266 Thought this might be a good place to get a good insight on performance of rendering large number of Views in Ember.