我是新的emberjs,所以有可能我完全錯過了一些東西。#collection使用contentBinding在tbody中渲染時不會自動更新
我想呈現與我從Ajax請求檢索的內容表的正文。
我在我的視圖中使用ArrayController和{{#collection}},我綁定到控制器的內容(如文檔所示)。
它在我的ArrayController
中的初始值爲content
時有效,但當我呼叫.set('content', [...])
時它不會自動更新。
注意,它只有當我把我的觀點的tagName
到'tobdy'
失敗,它的工作原理例如如果我使用'pre'
(或幾乎任何東西)。
JSFiddles這表明問題:
- http://jsfiddle.net/midu/DjxG4/10/(與
tbody
,應2S後更新,但沒有) - http://jsfiddle.net/midu/DjxG4/11/(與
pre
,更新後的2秒)
我問題是:
- is th是一個錯誤還是我不明白它應該如何工作?
- 有關在模板中渲染表格正文的任何建議?
這是我的代碼如下所示:
的index.html
<table id="the-table">
<thead>
<tr>
<th>status</th>
<th>title</th>
<th>url</th>
<th># messages</th>
<th>judging status</th>
</tr>
</thead>
</table>
<script type="text/x-handlebars" data-template-name="submissions">
{{#collection contentBinding="App.submissionsController"}}
<tr>
<td>{{content.status}}</td>
<td>{{content.title}}</td>
<td><a href="{{content.url}}">note</a></td>
<td>{{content.nbMessages}}</td>
<td>{{content.judgingStatus}}</td>
</tr>
{{/collection}}
</script>
index.js
var App = Em.Application.create({
ready: function() {
App.submissionsController.index();
this._super();
}
});
// model
App.Submission = Em.Object.extend({
title: null,
judgingStatus: null,
status: null,
url: null,
nbMessages: 0
});
// controller... not really.
App.submissionsController = Em.ArrayController.create({
content: [ App.Submission.create({title: 'kevin', status: 'a', judgingStatus: 'b', url: 'http://google.com', nbMessages: 1}) ],
index: function() {
// simulates data that arrives to the page after a few seconds (think ajax request)
window.setTimeout(function() {
App.submissionsController.set('content', [
App.Submission.create({title: 'stefano', status: 'c', judgingStatus: 'd', url: 'http://stackoverflow.com', nbMessages: 2})
]);
}, 2000);
}
});
Em.View.create({
templateName: 'submissions',
tagName: 'tbody'
}).appendTo('#the-table');
太棒了!工作,謝謝!我提交了[pull request](https://github.com/emberjs/ember.js/pull/488)來更新'ArrayController'的文檔。 – midu 2012-02-11 22:52:10