ember.js集合視圖中的項目特定操作

Question

我剛開始玩弄ember.js庫以查看它的全部內容。我想要顯示一個數據表，並在每一行的右邊有一個刪除按鈕，從表中刪除該項。我不知道如何做到這一點。注意，我也嘗試創建一個子視圖（ItemView）並在{{#each ...}} ... {{/ each}}部分內聯使用它，但是ember.js抱怨期待一個視圖類而不是ItemView，即使ItemView是使用Ember.View.create定義的。我也想知道爲什麼這不起作用。即使在文檔中的#each塊中使用子視圖的示例代碼也不起作用。

即使我可以聲明一個名爲ItemView的子視圖來呈現每個單獨的Item，但我仍然不知道如何獲取該特定視圖的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/（更新鏈接的jsfiddle 12年1月21日）

它的主旨是

把手

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

的Javascript

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

Answer 2

不知道這是否最好的方式，但我已經把項目索引或項目名稱作爲標記的屬性，然後使用jQuery獲取它。

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


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

    removeItem: function (event) { 
     var id = this.$().parent().parent().attr('itemName'); 
     ... 
    } 
}); 

希望這會有所幫助。

Answer 3

感謝T嗡嗡聲我找到了同樣的問題的答案。

在讀取trek intro之後，我寧願使用{{action removeItem person}}來明確指示應在哪個對象上執行操作。

<script type="text/x-handlebars"> 
<table> 
    {{#each person in App.peopleController}} 
     {{#view App.PersonView}} 
      <td>{{person.fullName}}</td> 
      <td><button {{action removeItem person}}>Delete</button> 
     {{/view}} 
    {{/each}} 
</table> 
</script> 

在視圖中，我會用var person = evt.context;來獲取person對象。

App = Ember.Application.create(); 

App.Person = Ember.Object.extend({ 
    fullName: function() { 
     return this.get('firstName') + ' ' + this.get('lastName'); 
    }.property('firstName', 'lastName') 
}); 

App.peopleController = Ember.ArrayProxy.create({ 
    content: [App.Person.create({ firstName: "Yehuda", lastName: "Katz" }), 
    App.Person.create({ firstName: "Tom", lastName: "Dale" })] 
}); 

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

你可以用這個小提琴jsfiddle.net/67GQb/127