Создание динамической строки с bindAttr

Question

Я хотел бы создать динамическое имя класса для объекта со значением, которое я получаю от своей модели. Один из ключей называется provider, который содержит либо «твиттер», либо «facebook». То, что я хотел бы сделать, - это добавить строку «icon-» к провайдеру, чтобы получившийся класс был icon-twitter или icon-facebook.

Это код, который у меня есть.

<i {{bindAttr class=":avatar-icon account.provider"}}></i>

Ember предлагает способ включить статическую строку в атрибуте, предваряя : к нему. Вы можете видеть, что я также добавляю класс, называемый avatar-icon в этом примере. Я уже пробовал :icon-account.provider, который просто привел к литеральной строке «icon-account.provider».

ОТВЕТ Ницца. Я сейчас работаю над решением, похожим на ваш ответ. Вопрос: этот взгляд будет использоваться в контексте каждого цикла. Как передать текущий элемент, который будет использоваться в представлении? У меня есть это прямо сейчас:

{{#each account in controller}} {{#view "Social.AccountButtonView"}} <i {{bindAttr class="account.provider"}}></i> {{/view}} {{/each}}

Можно просто сделать это:

{{#view "Social.AccountButtonView" account="account"}} ?

Answer 1

Я ранее заявлял, что attributeBindings будет подходящим решением для этого, но я ошибся. При привязке атрибута class данного View, как указано, вы должны использовать classNames или classNameBindings. Пожалуйста, обратитесь к приведенному ниже образцу:

App.ApplicationView = Em.View.extend({ 
    provider: 'Facebook', 
    classNameBindings: 'providerClass', 
    providerClass: function() { 
     return 'icon-avatar icon-%@'.fmt(this.get('provider').toLowerCase()); 
    }.property('provider') 
}); 

Это будет оказывать следующий HTML:

<div id="ember212" class="ember-view icon-avatar icon-facebook"> 
    <h1>App</h1>  
</div> 

Вот скрипка: http://jsfiddle.net/schawaska/HH9Sk/

(Примечание: скрипка ссылки на версию Ember.js ранее RC)