Question

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

在下面的代码中，当ArrayController的视图插入DOM时，有两个setTimeout调用。这些setTimeout调用中的每一个都将连接到ArrayController并向其添加两个列表项。第一个setTimeout工作正常：两个列表项添加到ArrayController，模板显示两个列表项。但是，在第二个setTimeout之后，模板仍然只显示前两个列表项而不是全部四个。此时，页面上只显示了两个列表项，但如果console.log表示ArrayController上content数组的长度，则显示4的正确长度。< / p>

模板：

<!-- 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助手更改为常规的每个助手，如下所示，那么一切正常。但我希望能够为每个项目的视图定义一个类。

<!-- 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>

项目视图为：

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

Ember.js：在查看前两项后，视图停止更新

1 个答案: