javascript - Ember 使用点击、命令/控制和 shift 键从列表中选择

Question

我有一个项目列表，要根据以下条件进行选择。 (就像在 Mac Finder 中一样)

1. 点击 --> 选择当前项目并取消选择之前选择的项目。

2. Command/Control + 单击 --> 选择当前项目而不取消选择之前选择的项目。

3. Shift + 单击 --> 选择之前单击的项目和当前单击的项目之间的项目。

选择后，

1. 我需要获取选定的项目。

2. 我需要取消选择所有选中的项目。

我的模板:

<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

因为我是 ember 的新手，所以无法做到这一点。我正在学习，有很多东西要更新，非常感谢您在任何方面的回复和帮助。

Answer 1

首先，您应该只在 View 上设置模型，这样您就可以实际引用它，而不必传回上下文并进行搜索:

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