emberjsで新しくなったので、いくつかのことを完全に忘れている可能性があります。#tbodyでレンダリングするとcontentBindingを使用してコレクションが自動的に更新されない
私はAjaxリクエストから取得するコンテンツを持つテーブルの本体をレンダリングしようとしています。
ArrayControllerと、コントローラの内容にバインドした私のビューの{{#collection}}を使用します(ドキュメントが示唆するように)。
ArrayController
の中にcontent
の初期値を設定しても動作しますが、.set('content', [...])
を呼び出すと自動的には更新されません。それだけで私は'tobdy'
に私の見解のtagName
を設定すると、たとえば、私は'pre'
(またはほとんど何か他のもの)を使用する場合、それが動作失敗したことを
は注意してください。その問題を示し
JSFiddles:
- http://jsfiddle.net/midu/DjxG4/10/(
tbody
で、2S後に更新しますが、ないはずです) - http://jsfiddle.net/midu/DjxG4/11/(
pre
と、2S後のアップデート)
マイ質問は次のとおりです。
- は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');
驚くばかり!それは動作します、ありがとう!私は 'ArrayController'のドキュメントを更新するために[pull request](https://github.com/emberjs/ember.js/pull/488)を提出しました。 – midu