Ember.js: Przekazywanie modelu do widoku

Question

Mam kontroler z danymi o kontach użytkowników (ikona, nazwa, dostawca itp.). Wewnątrz wyjścia każdej pętli mam widok, który zbuduje klasę CSS dynamicznie w oparciu o dostawcę przekazanego za pośrednictwem tego konkretnego modelu.

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

Pytanie, które mam, jest dwojakie.

1. Jak przekazać do widoku "konto" lub aktualnie powtarzany element?
2. Po przekazaniu go w jaki sposób się do niego odwołujesz?

Jestem pewien, że dzieje się to dość często, ale nie mogę znaleźć żadnych przykładów. Czy ktoś może zaoferować trochę informacji na ten temat?

Answer 1

Odwiedzin ma specjalną content właściwość w widoku, który umożliwia bardziej proste podejście: wystarczy użyć nazwy własności modelki bez view.content. części.
Ponadto podczas iteracji za pomocą kontrolera można pominąć nazwę zmiennej pętli i użyć zamiast niej nazwy this, np. this guide. Nie jest to konieczne, ale może sprawić, że kod będzie trochę czystszy.
także od wewnątrz szablonu widoku za generalnie nie trzeba odwoływać się do zmiennych poza chociaż można, jeśli chcesz ..

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

I zawsze można uzyskać dostępu do właściwości content od wewnątrz widoku z:

this.get('content'); 

Answer 2

Aktualnie powtarzany element można przekazać do widoku za pomocą powiązań właściwości i można go w szablonie odwoływać jako "{{view.property}}". Na przykład:

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

Stworzyłem prosty jsfiddle dla powyższej sprawy. Sprawdź to i daj mi znać, jeśli udało Ci się rozwiązać problemy.

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