ember.js - 带有延迟内容的 Ember 列表视图（使用 #each 助手和 zynga 滚动条）

Question

我正在基于控制器中的两个数组渲染两个列表。第一个数组的内容会立即添加，但第二个数组会在 500 毫秒的延迟后填充。顶部的列表按预期滚动，但第二个（延迟的）列表没有。延迟模拟通过 Ember 数据通过 ajax 请求加载内容，具有相同的效果。有什么线索吗？

代码可在此处获得：http: //jsbin.com/owejoz/5/

这是列表的显示方式：

<div class="content">
    <div class="content_list" data-scrollable="x">
        {{#each content1}}
            <div class="list_item">{{name}}</div>
        {{/each}}
    </div>
</div>
<div class="content">
    <div class="content_list" data-scrollable="x">
        {{#each content2}}
            <div class="list_item">{{name}}</div>
        {{/each}}
    </div>
</div>

javascript代码如下：

App.IndexController = Ember.ArrayController.extend({
   content1: [],
   content2: []
 });

App.IndexRoute = Ember.Route.extend({
    setupController: function(controller) {
        var content1 = [];
        var content2 = [];
        for (var j = 1; j < 5; j++) {
            content1.push({name: "Item " + j});
        }
        controller.set('content1', content1);


        setTimeout(function () {
            for (var i = 1; i < 5; i++) {
                content2.push({name: "Delayed item " + i});
            }
            controller.set('content2', content2);

        }, 500);
    }
});

Answer 1

更改setTimeout为Ember.run.later：

Ember.run.later(function () {
      for (var i = 1; i < 5; i++) {
        content2.push({name: "Delayed item " + i});
      }
      controller.set('content2', content2);

    }, 500);