Как динамически генерировать класс css внутри каждого оператора для Ember View

Question

<div> 
    {{#each value in controller}} 
    <div {{classNameBindings "col-lg-{{value}}"}}>{{value}}</div> 
    {{/each}} 
    </div> 

Выше мой частичный вид.

Я хочу, чтобы создавать классы, такие как: Col-LG-1, цв-LG-2 и т.д. Мой контроллер:

App.circleController = Ember.ArrayController.extend({ 
    setupController: function(controller) { 
     controller.set('content', [1,2,3,4,5,6,7]); 
    } 
}); 

почему я получаю сообщение об ошибке: утверждение не удалось: содержимом Ember.CollectionView должен осуществить Ember.Array. ?

Answer 1

Я использую настраиваемое представление для применения динамически названных классов к элементам внутри вспомогательного помощника each. Имя класса генерируется внутри представления по свойству, чем зависит от поставленного индекса.

App.ItemView = Ember.View.extend({ 
    classNameBindings: ['itemClass'], 
    index: null, 

    itemClass: function() { 
     return 'class-'+this.get('index'); 
    }.property('index') 
}); 

В шаблоне я поставляю индекс через {{view}} помощника внутри каждой итерации.

{{#each value in controller}} 
    {{#view App.ItemView indexBinding="value"}} 
     Item #{{value}} 
    {{/view}} 
{{/each}} 

Для более близкого взгляда, check out this jsfiddle.