dynamic - 如何在 Ember 视图的每个语句中动态生成 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}}

仔细看看，看看这个 jsfiddle。