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

Question

I have an ArrayController (List) with an itemController (ListItem). The problem I am seeing is that the template that renders the list stops updating after the first two list items are rendered.

In the code below, there are two setTimeout calls when the ArrayController's view is inserted into the DOM. Each of these setTimeout calls will connect to the ArrayController and add two more list items to it. The first setTimeout works fine: two list items are added to the ArrayController, and the template shows both list items. However, after the second setTimeout, the template still only shows the first two list items instead of all four. At this point, there are only two list items shown on the page, but if I console.log the length of the content array on the ArrayController, it shows the correct length of 4.

Templates:

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

Controllers:

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

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

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

Views:

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

Model:

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

Now, if I change the blockless each helper into a regular each helper like the following, then this all works fine. But I want to be able to define a class for the view of each item.

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

Mike Mike · Accepted Answer · 2014-05-01T18:44:54

As seen above, I had originally not assigned a tag to the list item template. After I assigned it a tag, it works.

I changed the item template to:

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

And the item view to:

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

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

1 Answers