javascript - Ember.js:渲染前两项后 View 停止更新

Question

我有一个 ArrayController (List) 和一个 itemController (ListItem)。我看到的问题是，呈现列表的模板在呈现前两个列表项后停止更新。

在下面的代码中，当 ArrayController 的 View 插入 DOM 时，有两个 setTimeout 调用。每个 setTimeout 调用都会连接到 ArrayController 并向其添加另外两个列表项。第一个 setTimeout 工作正常:两个列表项添加到 ArrayController，并且模板显示这两个列表项。但是，在第二次 setTimeout 之后，模板仍然只显示前两个列表项，而不是全部四个。此时，页面上仅显示两个列表项，但如果我在 ArrayController 上 console.log 中 content 数组的长度，它会显示正确的长度4。

模板:

<!-- List View -->
<script type="text/x-handlebars" data-template-name="list" id="list">
  {{each controller itemViewClass="App.ListItemView"}}
</script>

<!-- Item View -->
<script type="text/x-handlebars" data-template-name="listitem" id="listitem">
  <li>Testing: {{content.caption}}</li>
</script>

Controller :

App.ListController = Ember.ArrayController.extend({
  itemController: 'list-item',

  addItem: function (caption) {
    this.pushObject(
      App.ListItem.create({
        caption: caption
      })
    );
  }
});

App.ListItemController = Ember.Controller.extend({
});

观看次数:

App.ListView = Ember.View.extend({
  templateName: 'list',
  didInsertElement: function () {
    setTimeout(function () {
      this.get('controller').addItem('test1');
      this.get('controller').addItem('test2');
    }.bind(this), 1000);

    setTimeout(function () {
      this.get('controller').addItem('test3');
      this.get('controller').addItem('test4');
    }.bind(this), 2000);
  }
});

App.ListItemView = Ember.View.extend({
  tagName: '',
  templateName: 'listitem',
});

型号:

App.ListItem = Ember.Object.extend({
  caption: ''
});

<小时/>

现在，如果我将无 block each 帮助器更改为常规的每个帮助器，如下所示，那么这一切都可以正常工作。但我希望能够为每个项目的 View 定义一个类。

<!-- List View -->
<script type="text/x-handlebars" data-template-name="list" id="list">
  {{#each controller}}
    <li>Testing: {{content.caption}}</li>
  {{/each}}
</script>

Answer 1

如上所示，我最初没有为列表项模板分配标签。在我为其分配标签后，它就可以工作了。

我将项目模板更改为:

<!-- Item View -->
<script type="text/x-handlebars" data-template-name="listitem" id="listitem">
  Testing: {{content.caption}}
</script>

项目 View :

App.ListItemView = Ember.View.extend({
  tagName: 'li',
  templateName: 'listitem',
});