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

Question

我正在试图弄清楚如何构建一个包含列表的小应用程序，您可以在其中选择多个项目并切换以选择所有/无，并查看当前所选行的数量。

我认为“选定”状态不应该是模型对象的一部分，但我无法弄清楚如何做到这一点。

这是我目前的设置（显然不起作用）

可运行代码http://jsfiddle.net/jacobk/rU35G/1/

var App = Ember.Application.create();

App.ApplicationRoute = Ember.Route.extend({
    model: function() { return Ember.A(["Foo", "Bar", "Baz"]); }
});

App.ApplicationController = Ember.ArrayController.extend({
    allSelected: false,

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

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

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

• 是应该使用每行的自定义视图控制单个“行项目”，还是像上面的小提琴中那样使用自定义控制器
• 如何将“全部选择”从ArrayController传播到所有单个控制器（或视图，如果这更适合）

我试图了解何时使用绑定，观察者，属性，“需求”等，并在适当时使用控制器与视图等。 我还没有弄清楚ember应用程序中的一般信息/数据流。

例如，上面我的示例中的ArrayController迭代“包含”视图/控制器，并在切换“全选”复选框时更改“选定”状态或者所有“子控制器”观​​察/“绑定到” ArrayController在更改时自行更改，如果是这样，我应该如何以相反的方向传播数据。 ArrayController将如何获得“当前所有选定的”行？

我很想看到这个“规范解决方案”。

Answer 1

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

    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()
    });

Answer 2

我同意将选定的状态保留在模型之外。 您需要在itemController中定义itemController。

这是一个有效的例子。 http://jsbin.com/sunat/3/edit

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>