Question

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

我已经阅读了这个问题How to push/pop arrays in Ember.js?，它可能在正确的轨道上，但不是我需要的。

我有：

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

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

想法？

Answer 1

这可能会让您了解如何继续。

这是working demo。

以下是相关代码。您可能希望将其分离为可重用性的组件。

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>

Answer 2

这是一个基于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/

Ember.js - 绑定到单个阵列的多个checkebox

2 个答案: