Класс привязки из массива в Ember.js

Question

Я начинаю с Ember.js, и я чувствую себя немного потерянным. У меня есть объект, как это:

App.BRANDS = [ 
{ 
    brand:'Audi' 
},{ 
    brand:'BMW' 
},{ 
    brand:'Skoda' 
}]; 

Так что я пытаюсь, чтобы отобразить все элементы этого объекта с {{#each}} компонента, показывать текст внутри и связать один и тот же текст, как имя класса. Поэтому я закодировать это в маршруте:

App.InsuranceAutoSelectBrandRoute = App.Route.extend({ 
    model: function(){ 
    return App.BRANDS; 
    } 
}); 

И это в шаблоне:

<article> 
    {{#each brand in model tagName='ul'}} 
    <li class='item-space'> 
     <span {{bind-attr class=':brand-auto classNameAuto'}}></span> 
     {{brand.brand}} 
    </li> 
    {{/each}} 
</article> 

Тогда вопрос о том, что название каждой марки, прежде чем я связать его как класс ATTR я должен в нижнем регистре это ...

App.InsuranceAutoSelectBrandController = Ember.Controller.extend({ 
    classNameAuto: function() { 
    App.BRANDS.forEach(function(item, index){ 
     return item.brand.toLowerCase(); 
    }); 
    }.property() 
}); 

Если в той же точке, где я возвращающее значение я делаю журнал, он работает, но класс атр не показывает. Что я хотел бы:

<article> 
    <li class='item-space'> 
    <span class='brand-auto audi'}}></span> 
     Audi 
    </li> 
    <li class='item-space'> 
    <span class='brand-auto bmw'}}></span> 
    BMW 
    </li> 
    <li class='item-space'> 
    <span class='brand-auto skoda'}}></span> 
    Skoda 
    </li> 
</article> 

Прости меня за мой уровень английского и спасибо

Answer 1

Во-первых, как сказал @Kitler, свяжите атр осуждается. Если вы используете 1.13.x или выше, вы можете просто вставить класс как любую другую переменную, {{brand.brand}}.

Во-вторых, ваш код является неправильным и не будет работать. Самый простой способ сделать то, что вам нужно, - это помощник. Вам нужно создать помощник, lower-case и использовать его таким образом:

<article> 
    <ul> 
    {{#each model as |brand|}} 
     <li class='item-space'> 
     <span class='brand-auto {{lower-case brand.brand}}'>{{brand.brand}}</span>   
     </li> 
    {{/each}} 
    </ul> 
</article> 

Как создать помощник вы можете узнать из документации (http://guides.emberjs.com/v1.13.0/templates/writing-helpers/). Если вы используете уголек-CLI, следующий код должен работать:

//app/helpers/lower-case.js 
import Ember from 'ember'; 

export default Ember.Handlebars.makeBoundHelper(function (str) { 
    return str.toLowerCase(); 
});