4

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

我相信“选定”状态不应该是模型对象的一部分，但我真的不知道该怎么做。

这是我当前的设置（显然还不能正常工作）

可运行代码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 如何获得“所有当前选定的”行？

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

4

2 回答 2

1

不需要行控制器。@each，计算属性和检查绑定可以用来解决这个问题，如下所示。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()
    });
于 2013-02-22T12:53:29.990 回答
0

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

这是一个工作示例。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>
于 2014-03-06T00:16:00.957 回答