我应该在哪里保留列表的选择状态？ [英] Where should I keep selection state for a list?

问题描述

我正在使用ember 1.0.0-pre4。

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

我设法显示列表。但我不知道如何管理选择状态。当我将类似 {{查看Ember.Checkbox checkedBinding =isSelected}} 的东西放入模板中时，选择状态将保存在我的模型中。但我不认为这是最好的地方。我认为选择状态属于控制器或查看状态。

请问您可以告诉我存储和访问（多个）列表选择状态的最佳方式？

解决方案

一种方法是在控制器中保留第二个列表：

  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-handlebarsdata-template-name =index> 
< ul> 
 {{#each foo in controller}} 
< li {{action selectToggle foo}}> {{foo.name}}< / li> 
 {{/ each}} 
< / ul> 
< / script> 
  

只需在控制器中维护一个单独的列表，并根据项目是否为

您还可以使用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-handlebarsdata-template-name =index> 
< ul> 
 {{#each foo in controller.selectedContent}} 
< li {{bindAttr class =foo.isSelected}} {{action selectToggle foo}}> {{foo.name}} < /锂> 
 {{/ each}} 
< / ul> 
< / script> 
  

然后在您的selectToggle方法中，您恰当地设置foo的isSelected属性。

I'm using ember 1.0.0-pre4.

I want to display a list of Model instances. The user should be able to select as many list entries by clicking a button or checkbox that is rendered within each row.

I managed to display the list. But I don't know how to manage selection state. When I put something like {{view Ember.Checkbox checkedBinding="isSelected"}} into the template then the selection state will be held in my model. But I don't think this is the best place. I think selection state belongs to the controller or view state.

Could you please tell me the best way to store and access (multiple) list selection state?

解决方案

One way is to just keep a second list in the 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>

That just maintains a separate list in the controller and pushes/removes based on whether or not the item was selected.

You could also use an Ember.ObjectProxy to augment the values of the foo object with an "isSelected" property.

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>

Then in your selectToggle method you just set foo's isSelected property appropriately.

这篇关于我应该在哪里保留列表的选择状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！