Ember.js 嵌套 View 变得非常慢

Question

我有一个两级深度数据模型，我想用 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 View ，性能会受到很大影响，按下加载按钮后需要相当长的时间才能在页面中显示控件:

    {{#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 完成的

Answer 1

不使用 Ember 选择和 textarea View ，而是为它们使用普通的 html 标记并仅绑定(bind)属性。这些 View 通常会占用更多内存，并且将它们写入嵌套结构中会使您的代码运行缓慢。