Ember.js: passaggio del modello in visualizzazione

Question

Ho un controller con dati sugli account utente (icona, nome, provider, ecc.). All'interno dell'output di ogni loop ho una vista che costruirà una classe CSS in modo dinamico sulla base del provider passato attraverso quel modello specifico.

<script type="text/x-handlebars" data-template-name="accountItem"> 
{{#each account in controller}} 
    {{#view App.AccountView}} 
     <h4>{{account.name}}</h3> 
     <img {{bindAttr src="account.icon"}} /> 
     <i {{bindAttr class="account.provider"}}></i> 
    {{/view}} 
{{/each}} 
</script> 

App.AccountView = Ember.View.extend({ 
    tagName: 'a', 
    classNames: ['avatar-image'], 
    providerClass: function(el) { 
     // do something 
    } 
}); 

La domanda che ho è duplice.

1. Come si passa in "account" o l'elemento attualmente iterato nella vista?
2. Dopo averlo inoltrato, come lo si fa?

Sono sicuro che questo è qualcosa che accade abbastanza spesso ma non riesco a trovare alcun esempio. Qualcuno può offrire qualche input su questo per favore?

Answer 1

Vista dispone di una speciale content proprietà in una visualizzazione che consente un approccio più semplice: basta usare un nome della proprietà del modello senza la parte view.content..
Inoltre, quando si sta iterando sul controller, è possibile omettere il nome della variabile loop e utilizzare invece this, come in this guide. Questo non è necessario ma può rendere il codice un po 'più pulito.
Inoltre, all'interno di template di vista che in genere non è necessario fare riferimento alle variabili esterne anche se è possibile se si come ..

{{#each controller}} 
    {{#view App.IndexView contentBinding="this"}} 
     <h4>{{name}}</h4> 
     <img {{bindAttr src="icon"}} /> 
     <i {{bindAttr class="provider"}}></i> 
     <i> {{icon}} </i> 
     <i>{{provider}}</i> 
    {{/view}} 
{{/each}} 

E si può sempre accedere alla proprietà content dall'interno la vista con:

this.get('content'); 

Answer 2

L'elemento attualmente iterato può essere passato alla vista con l'aiuto di associazioni di proprietà e può essere indicato come "{{view.property}}" nel modello. Ad esempio:

{{#each account in controller}} 
    {{#view App.IndexView itemBinding="account"}} 
      <h4>{{view.item.name}}</h3> 
      <img {{bindAttr src="account.icon"}} /> 
      <i {{bindAttr class="account.provider"}}></i> 
       <i> {{view.item.icon}} </i> 
       <i>{{view.item.provider}}</i> 
     {{/view}} 
{{/each}} 

Ho creato un semplice jsfiddle per il caso precedente. Controllalo e fammi sapere se sei riuscito a risolvere i problemi.

Fiddle url: http://jsfiddle.net/nCyn6/3/