Question

我有一个项目列表，根据以下条件选择。（就像在Mac Finder中一样）

点击 - ＆gt;选择当前项目并取消选择以前选择的项目。
命令/控制+点击 - ＆gt;选择当前项目而不取消选择以前选择的项目。
Shift + Click - ＆gt;选择之前单击的项目与当前单击项目之间的项目。

选择后，

我需要获取所选项目。
我需要取消选择所有选定的项目。

我的模板：

<ul >
    {{#each}}
        {{#view App.TestView}}
          <li class="user">{{val}}</li>
        {{/view}}
    {{/each}}
</ul>

JavaScript的：

App.IndexRoute = Ember.Route.extend({
    model: function() {
        return [{'val':'red', 'isActive': false},{'val':'blue', 'isActive': false},{'val':'green', 'isActive': false},{'val':'yellow', 'isActive': false},{'val':'orange', 'isActive': false},{'val':'pink', 'isActive': false}];
    },
    actions: {
        changeBgSelection: function (params) {
            var temp_obj =this.get("controller").objectAt(this.modelFor("index").indexOf(params));
            temp_obj.isActive=true;
        },
        deSelectAll: function(){
            this.get("controller").setEach("isActive", false);
        },
        getSelected: function(){
            //Get the selected items from the list
        },
        unSelectAll: function(){
            //To deselect all 
        }
    }
});  


App.TestView = Ember.View.extend({
    classNameBindings: ["isActive"],
    isActive: false,
    click: function(e) {  

        // Need to handle for click, control/command key + click , shift key + click. 

        // Need to call the method when an item is clicked 
        // this.get("controller").send("deSelectAll");
        this.set("isActive", !this.get("isActive"));
        var temp_model = this.get("context");
        this.get("controller").send("changeBgSelection", temp_model);
}

}）;

我的JSBin Link

我不能让这件事发生，因为我不熟悉。我正在学习，还有很多需要更新，非常感谢您的答复和帮助。

Answer 1

首先，您应该只在视图上设置模型，这样您就可以实际引用它而无需传回上下文并且必须搜索：

{{#view App.TestView model=this}}
   <li class="user">{{val}} - {{isActive}}</li>
{{/view}}

然后只需向isActive添加别名并切换该属性即可。此外，您只需使用e.ctrlKey，e.shiftKey，e.metaKey来查找是否单击了ctrl / shift /命令。我已经包含了一个小例子来帮助你入门。

App.TestView = Ember.View.extend({
  classNameBindings: ["isActive"],
  isActive: Ember.computed.alias('model.isActive'),
  click: function(e) {  
    if(e.ctrlKey) {
      this.toggleProperty("isActive");
    }else{
      this.get("controller").send("deSelectAll");
      this.toggleProperty("isActive");
    }
  }
});

http://jsbin.com/kocupegi/2/edit

Answer 2

经过长时间的尝试，我发现了流量，并且它对于列表的所有选择条件都正常工作。另外，Ctrl + A选择列表中的所有项目。

JSBin Link

使用单击，命令/控制和shift键从列表中选择Ember

2 个答案: