Ember.js: Пропускающая модель в поле зрения

Question

У меня есть контроллер с данными об учетных записях пользователей (значок, имя, поставщик и т. Д.). Внутри вывода каждого цикла у меня есть представление, которое будет строить класс CSS динамически на основе поставщика, прошедшего через эту конкретную модель.

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

Вопрос у меня есть в два раза.

1. Как вы переходите в «учетную запись» или текущий итеративный элемент в представление?
2. После того как вы передадите его, как вы обратитесь к нему?

Я уверен, что это происходит часто, но я не могу найти примеров. Может кто-нибудь предложить какой-то вклад в этом, пожалуйста?

Answer 1

Просмотров имеет особое свойство content в представлении, что позволяет более простой подход: вы просто использовать имя имущества модели без view.content. части.
Кроме того, когда вы выполняете итерацию по контроллеру, вы можете опустить имя переменной цикла и вместо этого использовать this, как в this guide. Это не обязательно, но может сделать код немного чище.
Кроме того, в рамках шаблона вида ты вообще не нужно ссылаться на внешние переменные, хотя вы можете, если вам нравится ..

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

И вы всегда можете получить доступ к content свойство внутри вида с:

this.get('content'); 

Answer 2

В настоящее время итерированный элемент может быть передан в представление с помощью привязок свойств, и его можно назвать «{{view.property}}» в шаблоне. Например:

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

Я создал простой jsfiddle для вышеуказанного случая. Проверьте это и сообщите мне, смогли ли вы решить проблемы.

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