如何在Ember视图的each语句中动态生成css类

Question

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

以上是我的部分观点。

我想生成像这样的类: col-lg-1，col 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。