Ember.js:View在呈现前两个项目后停止更新

Ember.js: View stops updating after rending the first two items

本文关键字：两个 项目 更新 View js Ember      更新时间：2023-09-26

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

在下面的代码中，当ArrayController的视图插入DOM时，有两个setTimeout调用。这些setTimeout调用中的每一个都将连接到ArrayController，并向其中再添加两个列表项。第一个setTimeout运行良好：两个列表项目被添加到ArrayCntroller，模板显示这两个列表条目。但是，在第二个setTimeout之后，模板仍然只显示前两个列表项，而不是全部四个。此时，页面上只显示了两个列表项，但如果I console.log是ArrayController上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>

控制器：

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: ''
});

现在，如果我像下面这样将无块each辅助对象更改为常规的each辅助对象，那么这一切都可以正常工作。但我希望能够为每个项目的视图定义一个类。

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

如上所述，我最初没有为列表项模板分配标记。我给它分配了一个标签后，它就工作了。

我将项目模板更改为：

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

并且项目视图为：

App.ListItemView = Ember.View.extend({
  tagName: 'li',
  templateName: 'listitem',
});
相关文章：