2012-02-10 2 views
1

emberjsで新しくなったので、いくつかのことを完全に忘れている可能性があります。#tbodyでレンダリングするとcontentBindingを使用してコレクションが自動的に更新されない

私はAjaxリクエストから取得するコンテンツを持つテーブルの本体をレンダリングしようとしています。

ArrayControllerと、コントローラの内容にバインドした私のビューの{{#collection}}を使用します(ドキュメントが示唆するように)。

ArrayControllerの中にcontentの初期値を設定しても動作しますが、.set('content', [...])を呼び出すと自動的には更新されません。それだけで私は'tobdy'に私の見解のtagNameを設定すると、たとえば、私は'pre'(またはほとんど何か他のもの)を使用する場合、それが動作失敗したことを

は注意してください。その問題を示し

JSFiddles:

マイ質問は次のとおりです。

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

答えて

0

私が見ることができるコードを修正しました2つのことjsfiddleにあります。

  1. アプリがDOMに挿入される前に、ハンドルバーのスクリプトが評価されていないので、私は断続的にuncaught exception: Error: <Ember.View:ember161> - Unable to find template "submissions"になるだろう。 hereを参照してください。

  2. 推奨されていない{{#collection}}ではなく、ビューを{{#each}}に変更してください。私は、非推奨の明確な情報源を見つけられませんでしたが、herehereと表示されています。

+0

驚くばかり!それは動作します、ありがとう!私は 'ArrayController'のドキュメントを更新するために[pull request](https://github.com/emberjs/ember.js/pull/488)を提出しました。 – midu

関連する問題