ember.jsコレクションビュー内のアイテム固有のアクション

Question

ember.jsライブラリを使い始めたばかりです。私はデータテーブルを表示したい、そして、各行の右側に、そのアイテムをテーブルから削除するための削除ボタンがある。私はこれをどうやって行うのか分かりません。

また、子ビュー（ItemView）を作成して{{#each ...}} ... {{/ each}}セクション内でインラインで使用しようとしましたが、ember.jsはItemViewはEmber.View.createを使用して定義されていますが、ItemViewではなくビュークラスです。それがなぜ機能していないのかも知りたいです。ドキュメントの＃ブロックごとに子ビューを使用するためのサンプルコードでさえ、動作しません。

個々のItemを描画するためにItemViewという子ビューを宣言できたとしても、その特定のビューのremoveItemアクションを取得してitemsControllerコレクションからどのアイテムを削除するかを知ることはできません。子ビューがコレクションにバインドされているItemインスタンスを取得するビューのプロパティはありますか？

{{#each App.itemsController}} 
      <tr> 
       <td>{{itemName}}</td> 
       <td><a href="#" {{action "removeItem" on="click"}}>Delete</a></td> 
      </tr> 
{{/each}} 

そして、ここに私のjavascriptです：ここで

は、リストを持っている私のビューテンプレートの一部である最良の方法この場合

window.App = Ember.Application.create(); 

window.App.Item = Ember.Object.extend({ 
    itemName: "defaultItemName" 
}); 

window.App.itemsController = Ember.ArrayProxy.create({ 
    content: [] 
}); 

window.App.ListView = Ember.View.create({ 
    templateName: 'listView', 

    removeItem: function (event) { 
     // ??? How do I figure out what item 
     // the user wanted to remove? 
    } 
}); 

Answer 1

マイケルにリンクされたマイケルは、正しいアプローチを示し、それぞれの中に子のItemViewを使用しています。それがなぜあなたにとってうまくいかなかったのか分かりませんが、残念なことにあなたの質問からそのコードを削除しました。

Yehudaの回答の構文の一部が少し古くなっていますので、私はそれを更新し、あなたの質問に少し似ています。あなたはここでそれをチェックアウトすることができます：http://jsfiddle.net/wmarbut/67GQb/130/（更新されたリンクを1/21/12をjsfiddleする）

それの推力が

Javascriptを

ハンドルバー

{{#each App.peopleController}} 
    {{#view App.PersonView personBinding="this"}} 
     <td>{{view.person.fullName}}</td> 
     <td><button {{action removeItem target="view"}}>Delete</button> 
    {{/view}} 
{{/each}} 

です

App.PersonView = Ember.View.extend({ tagName: 'tr', person: null, removeItem: function() { var person = this.get('person'); App.peopleController.removeObject(person); } });