list - 我应该在哪里保持列表的选择状态？

Question

我正在使用 ember 1.0.0-pre4。

我想显示一个模型实例列表。用户应该能够通过单击每行中呈现的按钮或复选框来选择尽可能多的列表条目。

我设法显示了列表。但我不知道如何管理选择状态。当我输入类似 {{view Ember.Checkbox checkedBinding="isSelected"}} 的内容时进入模板，然后选择状态将保留在我的模型中。但我不认为这是最好的地方。我认为选择状态属于 Controller 或 View 状态。

你能告诉我存储和访问(多个)列表选择状态的最佳方式吗？

Answer 1

一种方法是在 Controller 中保留第二个列表:

App.FooController = Ember.ArrayController.create({
  selectedContent: [],
  selectToggle: function(event) {
    var selectedContent;
    selectedContent = this.get(selectedContent);
    if (selectedContent.contains(event.context)) {
      return this.set('selectedContent', selectedContent.without(event.context));
    } else {
      return this.get('selectedContent').push(event.context);
    }
  }
});

<script type="text/x-handlebars" data-template-name="index">
  <ul>
    {{#each foo in controller}}
          <li {{action selectToggle foo}}>{{foo.name}}</li>
    {{/each}}
  </ul>
</script>

这只是在 Controller 中维护一个单独的列表，并根据是否选择了该项目来推送/删除。

您还可以使用 Ember.ObjectProxy 来增加具有“isSelected”属性的 foo 对象的值。

App.FooController = Ember.ArrayController.create({
  selectedContent: @get('content').map(function(item){
    Ember.ObjectProxy.create({ 
      content: item
      isSelected: false
    });
  }); 
});

<script type="text/x-handlebars" data-template-name="index">
  <ul>
    {{#each foo in controller.selectedContent}}
          <li {{bindAttr class= "foo.isSelected"}}{{action selectToggle foo}}>{{foo.name}}</li>
    {{/each}}
  </ul>
</script>

然后在您的 selectToggle 方法中，您只需适本地设置 foo 的 isSelected 属性。