问使用单击、命令/控制和移位键从列表中进行选择
EN

Stack Overflow用户

提问于 2014-05-26 09:02:32

回答 2查看 1.2K关注 0票数 5

我有一个项目清单，这是根据以下条件选择的。(就像在Mac Finder中)

单击-->选择当前项并取消选择先前选定的项。
命令/控制+单击->选择当前项而不取消选择先前选定的项。
Shift + Click ->在以前单击的项和当前单击的项之间选择项。

经过挑选后，

我需要找到选定的物品。
我需要取消选择所有选定的项目。

我的模板：

<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 链接

我无法实现这一点，因为我是新成员。我正在学习，并有许多更新，非常感谢您的答复和任何方面的帮助。

javascript

jquery

ember.js

性能强劲，每月20元起的MySQL

功能完善，便宜稳定，没有业务可以自动停机，强效降本的MySQL

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-05-28 22:16:08

经过很长一段时间的尝试，我已经找到了流程和它的工作良好的所有选择条件的名单。另外，Ctrl +A选择列表中的所有项目。

JSBin 链接

票数 0

Stack Overflow用户

发布于 2014-05-26 09:54:52

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

{{#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");
    }
  }
});