javascript - #collection 使用 contentBinding 在 tbody 中渲染时不会自动更新

Question

我是 emberjs 新手，所以我可能完全错过了一些东西。

我正在尝试使用从 Ajax 请求检索的内容来呈现表格的主体。

在我看来，我使用 ArrayController 和 {{#collection}} 绑定(bind)到 Controller 的内容(如文档建议的那样)。

当我将初始值设置为 content 时它会起作用。在我的里面ArrayController但当我调用 .set('content', [...]) 时它不会自动更新.

请注意，只有当我设置 tagName 时它才会失败我对'tobdy'的看法，如果我使用 'pre' ，它就会起作用(或几乎其他任何东西)。

显示该问题的 JSFiddles:

• http://jsfiddle.net/midu/DjxG4/10/ (使用 tbody ，应该在 2 秒后更新，但没有)
• http://jsfiddle.net/midu/DjxG4/11/ (带有 pre ，2s后更新)

我的问题是:

• 这是一个错误还是我不明白它应该如何工作？
• 对于在模板中呈现表格主体有什么建议吗？

这就是我的代码:

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

Answer 1

我做了两件事来修复代码，可以在 jsfiddle 上看到。

1. 我会间歇性地得到 uncaught exception: Error: <Ember.View:ember161> - Unable to find template "submissions"因为在将应用程序插入 DOM 之前，不会评估 Handlebars 脚本。请参阅here .

2. 将 View 更改为{{#each}}而不是已弃用的 {{#collection}} 。我还没有找到关于弃用的明确来源 - 但它表明 here和 here .