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:
- How many Views can Ember handle with single level model having objects of 4000 or more at times.
- 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: ember.js - Ember View - Recursive view call throws Stop Script Error - Stack Overflow Thought this might be a good place to get a good insight on performance of rendering large number of Views in Ember.