Javascript 如何在Ember.js中创建多选列表

我正试图找出如何构建一个由列表组成的小应用程序，您可以在其中选择多个项目并切换到全选/无，并查看当前选定行的数量

我相信所选的状态不应该是模型对象的一部分，但我真的不知道如何做到这一点

这是我目前的设置，显然还不起作用

可运行代码

是否应使用每行的自定义视图或上述小提琴中的自定义控制器来控制单个行项目 如果更适合，如何将“全选”从ArrayController传播到所有单个控制器或视图 我试图理解何时使用绑定、观察者、属性、需求等，何时使用控制器和视图等是合适的。我还没有研究过余烬应用程序中的一般信息/数据流

e、 g.我上面示例中的ArrayController是否应在选中“全选”复选框时迭代包含的视图/控制器并更改选定状态，或者所有子控制器是否应观察/具有与ArrayController的绑定并在其更改时更改自身，如果是，我应该如何向相反方向传播数据。ArrayController如何获取当前选定的所有行

---

我希望看到这方面的规范解决方案。

不需要行控制器@每个计算属性和checkedbinding都可以用来解决这个问题，如下所示。isSelected必须在arraycontroller的内容中定义：

    App.ApplicationController = Ember.ArrayController.extend({

        allSelected: function(key, value) {
    if ( value !== undefined ) {
     // when check box is ticked, this gets executed
      this.setEach( 'isSelected', value );
      return value;
    } else {
        //as a computed property
      return !!this.get( 'length' ) &&
        this.everyProperty( 'isSelected', true );
    }
  }.property('@each.isSelected')

        selectedCount: function() {
            return 0;
        }.property()
    });

---

我同意将所选状态排除在模型之外。您需要在Ember.ArrayController中定义itemController

下面是一个工作示例

---

正如我所说的，我认为将所选状态放在模型/内容元素中是不正确的。这似乎是一个纯粹的用户界面问题，如果可能的话，我想把它排除在数据之外。

<script type="text/x-handlebars" data-template-name="application">
    <h3>{{ selectedCount }} rows selected.</h3>
    <label>
    {{view Ember.Checkbox checkedBinding="allSelected"}}
        Toggle select all
    </label>
    <hr/>
    <ul>
    {{#each controller itemController="row"}}
        <li {{bindAttr class="isSelected"}}>
            {{view Ember.Checkbox checkedBinding="isSelected"}} {{this.content}}
        </li>
    {{/each}}
    </ul>
</script>

    App.ApplicationController = Ember.ArrayController.extend({

        allSelected: function(key, value) {
    if ( value !== undefined ) {
     // when check box is ticked, this gets executed
      this.setEach( 'isSelected', value );
      return value;
    } else {
        //as a computed property
      return !!this.get( 'length' ) &&
        this.everyProperty( 'isSelected', true );
    }
  }.property('@each.isSelected')

        selectedCount: function() {
            return 0;
        }.property()
    });

App.RowController = Ember.ObjectController.extend({
  isSelected: false
});

App.IndexController = Ember.ArrayController.extend({
  itemController: 'row',

  selectAll: function(key, value) {

    if (arguments.length == 2) {
      this.setEach('isSelected', value);

      return value;
    } else {

      return this.isEvery('isSelected', true);
    }
  }.property('@each.isSelected')
});

#template
<script type="text/x-handlebars" id="index" >
  <label>
    {{input type="checkbox" checked=selectAll}}
    Toggle select all
  </label>
  <hr/>
  <ul>
  {{#each}}
    <li>
      {{input type="checkbox" checked=isSelected}} {{name}}
    </li>
  {{/each}}
  </ul>
</script>