Javascript Ember.js-绑定到单个数组的多个复选框

我有一个复选框列表，我只能允许用户选择两个。然后，我需要将这些选中复选框的值添加到数组中。如果用户选择了相应的复选框，我还需要能够删除这些值

我读过这个问题，它可能在正确的轨道上，但不完全是我需要的

我有：

<label {{bindAttr class='checked:active'}}>
  {{view Ember.Checkbox valueBinding='id' }}
  Select 
</label>

{{view Ember.Checkbox valueBinding='id'}
挑选

我还需要在选中时应用“active”类

---

想法？

这可能会给你一个如何继续的想法

这是一本书

这是相关代码。为了可重用性，您可能希望将其作为一个组件分离出来

App.IndexController = Em.ArrayController.extend({
  selectedOptions: [],

  optionsSelected: function() {
    console.log(this.get('selectedOptions').toArray());
  }.observes('selectedOptions.[]')
});

App.DeveloperController = Ember.ObjectController.extend({

  isChecked: false,

  resetFlag: false,

  _isCheckedChanged: function(){
    if(!this.get('resetFlag')) {
      var isChecked = this.get('isChecked');

      if(isChecked) {
        if(this.get('parentController.selectedOptions').length >= 2) {
          this.set('resetFlag', true);
          this.set('isChecked', false);
        } else {
          this.get('parentController.selectedOptions')
              .addObject(this.get('content'));
        }
      } else {
        this.get('parentController.selectedOptions')
            .removeObject(this.get('content'));
      }
    } else {
      this.set('resetFlag', false);
    }
  }.observes('isChecked')
});

<script type="text/x-handlebars" data-template-name="index">
  <ul>
    {{#each item in model itemController="developer"}}
      <label {{bindAttr class='checked:active'}}>
        {{view Ember.Checkbox checkedBinding="isChecked"}}
        {{item.content}}
      </label>
    {{/each}}
  </ul>
</script>

App.IndexController=Em.ArrayController.extend({
所选选项：[]，
选项已选择：函数（）{
log（this.get（'selectedOptions'）.toArray（））；
}.observes（'selectedOptions.[]'））
});
App.DeveloperController=Ember.ObjectController.extend({
检查：错误，
重置标志：false，
_isCheckedChanged:函数（）{
如果（！this.get（'resetFlag'））{
var isChecked=this.get（'isChecked'）；
如果（已检查）{
if（this.get（'parentController.selectedOptions'）。长度>=2）{
此.set（'resetFlag'，true）；
此.set（'isChecked'，false）；
}否则{
this.get（'parentController.selectedOptions'））
.addObject（this.get（'content'）；
}
}否则{
this.get（'parentController.selectedOptions'））
.removeObject（this.get（'content'）；
}
}否则{
此.set（'resetFlag'，false）；
}
}.observes（'isChecked'））
});

{{{#model itemController=“developer”}中的每个项
{{view Ember.Checkbox checkedBinding=“isChecked”}
{{item.content}
{{/每个}}

这是一个基于余烬组件的有效解决方案。

它不处理所有边缘情况，例如，在组件渲染后更改的绑定值，但它处理基本情况。如果需要，可以轻松扩展

可以使用

Ember.A（）

构造数组，以便它具有

addObject

等

---

组成部分：

组件模板：

用法：

有关组件的更多信息：

---

这看起来很不错。我要试一试，然后再打给你。效果很好！不得不调整一些东西来满足我的需要，但是是的。我甚至不知道从哪里开始。现在我知道，“知道是成功的一半。”（诀窍是在

{{{each}}

中传递一个特定的控制器。我不知道我能做到）

App.ArrayCheckboxComponent = Em.Component.extend({

  value: null # included in array when checked
  array: null # array to bind to
  _checked: null # boolean

  init: ->
    @_super.apply(this, arguments)
    array = @get('array')
    unless array.addObject && array.removeObject && array.contains
      throw new Error('Array used for `ArrayCheckboxComponent` must implement addObject/removeObject')
    if array.contains(@get('value'))
      @set('_checked', true)
    else
      @set('_checked', false)

  checkedDidChange: (->
    value = @get('value')
    array = @get('array')
    if @get('_checked')
      array.addObject(value)
    else
      array.removeObject(value)
  ).observes('_checked')

})

{{view Em.Checkbox checkedBinding='_checked'}}

{{array-checkbox value='item1' arrayBinding='path.to.array'}}