Ember.js：查看停止更新後，出現前兩項

我有一個ArrayController（List）與itemController（ListItem）。我看到的問題是呈現列表的模板在呈現前兩個列表項後停止更新。Ember.js：查看停止更新後，出現前兩項

在下面的代碼中，當ArrayController的視圖插入到DOM中時，會有兩個setTimeout調用。這些setTimeout調用中的每一個都將連接到ArrayController併爲其添加兩個更多列表項。第一個setTimeout工作正常：將兩個列表項添加到ArrayController，並且模板顯示兩個列表項。但是，在第二次setTimeout之後，模板仍然只顯示前兩個列表項目，而不是全部四個。此時，頁面上只顯示兩個列表項，但如果我在content數組的長度爲content的ArrayController上顯示正確的長度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助手到正規每個幫助像下面這樣，那麼這一切工作正常。但我希望能夠爲每個項目的視圖定義一個類。

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

來源

2014-05-01 Mike

如上所示，我原本沒有爲列表項模板分配標籤。在我爲它分配一個標籤之後，它就起作用了。

我改變了項目模板：

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

來源

2014-05-01 18:44:54 Mike

Ember.js：查看停止更新後，出現前兩項

回答

相關問題