Ember.js嵌套视图变得非常慢
问题描述:
我有一个两层深度数据模型,我想用Ember.js作为嵌套列表显示。如果我做了简单的版本,它表现相当好:Ember.js嵌套视图变得非常慢
{{#each parent in content}}
<p>Table {{parent.id}}</p>
<ul>
{{#each item in parent.children}}
<ul>
<li>{{item.position}}</li>
<li>{{item.position}}</li>
<li>{{item.position}}</li>
</ul>
{{/each}}
</ul>
{{/each}}
http://jsfiddle.net/krumpi/TdZJG/
然而,如果不是的显示为原始字符串我使用嵌套Ember.Select和Ember.TextArea视图的性能模型的性能受到了很多,它需要被按下加载按钮相当多之后的页面来显示控制:
{{#each parent in content}}
<ul>
{{#each item in parent.children}}
<ul>
<li>pos: {{item.position}}</li>
<li>
{{view Ember.Select
class="input-small"
contentBinding="App.CheckValues"
selectionBinding="item.status"}}
</li>
<li>{{view Ember.TextArea class="textarea-animated" name="description" valueBinding="item.comment"}}</li>
</ul>
{{/each}}
</ul>
{{/each}}
http://jsfiddle.net/krumpi/wtwHN/
关于如何提高性能,你有什么建议吗?这是用ember-1.0.0-pre4
答
而不是使用Ember选择和textarea视图使用普通的html标签为他们,只绑定属性。这些视图通常会占用更多的内存,并且将它们写入嵌套结构中预计会让您的代码运行缓慢。
这是由于您在第二种方法中创建的绑定。创建绑定是一项昂贵的任务。 – mavilein 2013-02-20 19:29:24
我想这可以通过编写一个ContainerView来减轻这些绑定设置。但不幸的是,我还没有开发出自己的ContainerView。 – mavilein 2013-02-20 19:44:48
我不知道你是否可以在更高层次上进行绑定,这可能有助于减少绑定的数量。 – Krumpi 2013-02-21 11:50:49