azioni specifiche dell'oggetto nelle viste collezione ember.js

Question

Sto appena iniziando a giocare con la libreria ember.js per vedere di cosa si tratta. Voglio visualizzare una tabella di dati e, a destra di ogni riga, avere un pulsante di cancellazione per eliminare quell'elemento dalla tabella. Non ho idea di come farlo però.

Nota, ho anche provato a creare una vista figlio (ItemView) e usarlo in linea all'interno della sezione {{#each ...}} ... {{/ each}}, ma ember.js si lamenta di aspettarsi una classe vista invece di ItemView, anche se ItemView è definito utilizzando Ember.View.create. Vorrei anche sapere perché non funziona. Anche il codice di esempio per l'utilizzo di una vista secondaria in un blocco #each nella documentazione non funziona.

Anche se potessi dichiarare una vista secondaria denominata ItemView per il rendering di ogni singolo elemento, non saprei ancora come ottenere l'azione removeItem di quella determinata vista per sapere quale elemento rimuovere dalla raccolta itemsController. Esiste una proprietà della vista per recuperare l'istanza Item a cui è associata la vista figlio in una raccolta?

Ecco la parte del mio modello di vista che ha l'elenco:

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

Ed ecco il mio 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

Il post di Yehuda, Michael, collegato per dimostrare l'approccio corretto, utilizzando un elemento Vista figlio all'interno di ciascuno. Non sono sicuro del motivo per cui non ha funzionato per te, hai rimosso quel pezzetto di codice dalla tua domanda sfortunatamente.

Alcune delle sintassi nella risposta di Yehuda sono leggermente obsolete, quindi l'ho aggiornata e modificata per essere un po 'più simile alla tua domanda. Puoi verificarlo qui: http://jsfiddle.net/wmarbut/67GQb/130/ (collegamento aggiornato alla jsfiddle 1/21/12)

La spinta di esso è

Manubrio

{{#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); 
    } 
});