javascript - Ember.js 检查值是否在数组属性中

Question

我有一个这样的游戏模型:

App.Game = DS.Model.extend({
    numbers: DS.attr(),
    drawnNumbers: DS.attr()
});

numbers的内容是

[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,
            16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,
            31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,
            46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,
            61,62,63,64,65,66,67,68,69,70,71,72,73,74,75]

并且drawnNumbers属性是一个空数组(默认情况下)

我的 View 遍历所有数字

{{#each number in numbers}}
    <li data-number="{{number}}" class="number"><a>{{number}}</a></li>
{{/each}}

当 drawnNumbers 数组中存在数字时，我想添加一个类 active。

我该怎么做呢？

Answer 1

您需要创建一个项目 Controller ，它在遍历每个项目时装饰每个项目，然后在其中添加逻辑。之后，您将使用 bind-attr 添加何时显示事件的条件逻辑。

模板

<ul>
  {{#each item in numbers itemController='foo'}}
    <li {{bind-attr class='isActive:active'}}>{{item.model}}</li>
  {{/each}}
</ul>

路由/ Controller

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return {
      numbers:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,
            16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,
            31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,
            46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,
            61,62,63,64,65,66,67,68,69,70,71,72,73,74,75],
      drawNumbers:[2,6,13]
     };
  }
});

App.IndexController = Em.ObjectController.extend({

});

App.FooController = Em.ObjectController.extend({
  needs:['index'], // stating I need the index controller, which has drawNumbers
  drawNumbers: Em.computed.alias('controllers.index.drawNumbers'),
  isActive:function(){
    var item = this.get('model'),
        drawNumbers = this.get('drawNumbers');

    return drawNumbers.indexOf(item)>=0;
  }.property('model')
})

http://emberjs.jsbin.com/zedogayi/2/edit