js -将多个复选框绑定到单个数组

Ember.js - multiple checkeboxes bound to a single array

本文关键字：绑定 单个 数组 复选框 js      更新时间：2023-09-26

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

我读过这个问题如何在Ember.js中推送/弹出数组?它可能在正确的轨道上，但不是我所需要的。

我

: 

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

我还需要"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>

这是一个基于Ember Components的可行解决方案。

它不处理所有的边缘情况，例如，绑定值在组件渲染后改变，但它做了基本的。如果需要，可以很容易地扩展。

可以使用Ember.A()来构造数组，以便它具有addObject等。

组件: 

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'}}

更多关于组件的信息:

http://emberjs.com/guides/components/

相关文章：