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屬性是一個空數組（默認情況下）

我的視圖遍歷所有數字

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

當一個數字存在於DrawnNumbers數組中時，我想添加一個active類。

我將如何去做？

Answer 1

您將要創建一個項目控制器，該控制器在迭代每個項目時裝飾每個項目，然后在其中添加邏輯。 之后，您將使用bind-attr添加何時顯示活動狀態的條件邏輯。

模板

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

路線/控制器

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

Answer 2

您也可以使用自定義組件。

App.DrawNumberComponent = Em.Component.extend({
  number: null, 
  drawNumbers: null,

  tagName: 'li',
  attributeBindings: ['number'],
  classNameBindings: ['active'],

  active: function(){
   return this.get('drawNumbers').indexOf(this.get('number')) !==-1;

  }.property('drawNumbers.each', 'number')

});


  <script type="text/x-handlebars" data-template-name="components/draw-number">
   <a>{{number}}</a>
  </script>

 <script type="text/x-handlebars" data-template-name="index">
    <ul>
    {{#each number in numbers}}
      {{draw-number number=number drawNumbers=controller.drawNumbers}}
    {{/each}}
    </ul>
  </script>

http://emberjs.jsbin.com/nuraj/1/edit