在Backbone.js的重点preSS？ [英] Keypress in backbone.js?

问题描述

它看起来像键盘preSS只能一个焦点元素上执行？我不完全买成，必须有执行类似click事件的键盘preSS事件的方法吗？

It looks like key-press can only be executed on a focus element? I don't fully buy into that, there has to be a way to execute a key-press event similar to a click event?

我有一次与一个项目工作的看法。我有一个的mouseenter - 鼠标离开的功能，增加了一个类鼠标移动到该项目。当项接收该类我希望能够使用键盘preSS事件上运行该项目的功能。

I have a view that works with one item at a time. I have a mouseenter - mouseleave function that adds a class to the item the mouse is over. When the item receives that class I want to be able to use a key-press event to run a function on that item.

显然，这是一个轻微的障碍，但我还想找出我需要做的。下面是一个例子视图。

Obviously this is a slight obstacle but Id like to find out what I need to do. Below is an example view.

var PlayerView = Backbone.View.extend({
    tagName: 'div',

    events: {
        'click .points, .assists, span.rebounds, span.steals':'addStat',
        'mouseenter': 'enter',
        'mouseleave': 'leave',
        'keypress': 'keyAction'
    },

    enter: function() {
        this.$el.addClass('hover');
    },

    leave: function() {
        this.$el.removeClass('hover');
    },

    keyAction: function(e) {
        var code = e.keyCode || e.which;
        if(code == 65) { 
            alert('add assist')
        }
    }
});

所以没有太多的逻辑，在这里，但我想我会写这样的事情

So there isn't much logic here, but I am thinking I would write something like this

    keyAction: function(e) {
        var code = e.keyCode || e.which;
        if(code == 65) { 
            var addAssist = parseInt(this.model.get('assists')) + 1;        
            this.model.save({assists: addAssist});
        }
    }

基本上，如果我能想出​​如何火了 keyAction 我的方法应该是好去。那么，有一些注意事项，我缺少一些执行code这样吗？我相信有一些。

Basically If I could figure out how to fire that keyAction method I should be good to go. So what are some caveats I am missing in executing some code like this? I am sure there are a few.

我明白了一些什么是错的这个code，它没有办法知道，当我们在该视图中运行关键preSS的方式，我将不得不增加一个条件或有事找活动类，所以当我执行它知道我在这里讲的，非常模糊的描述是什么型号的关键preSS，但我得到有什么不对，我只是不知道如何做到这一点？

I do understand some of what is wrong with this code, it has no way of knowing when we run keypress in that view, I would have to add a conditional or something to find the active class, so when I execute the keypress it knows what model I am talking about, very vague description here but I get there is something wrong I am just not sure how to do this?

我的解决方案

initialize: function() {
    this.listenTo(this.model, "change", this.render);
    _.bindAll(this, 'on_keypress');
    $(document).bind('keydown', this.on_keypress);
},

enter: function(e) {
    this.$el.addClass('hover');
},

leave: function(e) {
    this.$el.removeClass('hover');
},

on_keypress: function(e) {
    // A for assist
    if(e.keyCode == 65) { 
        if(this.$el.hasClass('hover')) {
            var addThis = parseInt(this.model.get('assists')) + 1;        
            this.model.save({assists: addThis});
        }
    }
    // R for rebound
    if(e.keyCode == 82) { 
        if(this.$el.hasClass('hover')) {
            var addThis = parseInt(this.model.get('rebounds')) + 1;        
            this.model.save({rebounds: addThis});
        }
    }
    // S for steal
    if(e.keyCode == 83) { 
        if(this.$el.hasClass('hover')) {
            var addThis = parseInt(this.model.get('steals')) + 1;        
            this.model.save({steals: addThis});
        }
    }
    // 1 for one point
    if(e.keyCode == 49) { 
        if(this.$el.hasClass('hover')) {
            var addMake = parseInt(this.model.get('made_one')) + 1;        
            this.model.save({made_one: addMake});

            var addOne = parseInt(this.model.get('points')) + 1; 
            this.model.save({points: addOne});
        }
    }
    // 2 for two points
    if(e.keyCode == 50) { 
        if(this.$el.hasClass('hover')) {
            var addMake = parseInt(this.model.get('made_two')) + 1;        
            this.model.save({made_two: addMake});

            var addTwo = parseInt(this.model.get('points')) + 2; 
            this.model.save({points: addTwo});
        }
    }
    // 2 for two points
    if(e.keyCode == 51) { 
        if(this.$el.hasClass('hover')) {
            var addMake = parseInt(this.model.get('made_three')) + 1;        
            this.model.save({made_three: addMake});

            var addThree = parseInt(this.model.get('points')) + 3; 
            this.model.save({points: addThree});
        }
    }
}

这是酷我的应用程序，因为当用户将鼠标悬停在该项目的用户可以打一键添加，而不是点击数据。

This is cool for my app because when the user hovers over the item the user can hit a key to add data, instead of clicking.

推荐答案

所以，你只打算要能够倾听在任何元素，你有监听器设置（或其子女）的关键preSS。而关键preSS事件只会当元素集中射击。所以我觉得你最好的解决办法是设置焦点元素您正在上空盘旋，然后就可以监听键preSS ，或者更好的，听的keydown ，因为它在一个更加规范的方式跨浏览器的行为。

So you are only going to be able to listen to the keypress in whichever element that you have the listener set on (or its children). And the keypress event is only going to fire if the element is focused. So I think the best solution for you would be to set focus on the element you are hovering over, then you can listen for the keypress, or better yet, listen to keydown because it behaves in a more standard way cross browser.

下面是一个工作的jsfiddle展示这种技术： http://jsfiddle.net/DfjF2/2/

Here is a working JSFiddle demonstrating this technique: http://jsfiddle.net/DfjF2/2/

只有某些表单元素接受焦点。您可以添加 CONTENTEDITABLE 或的tabIndex 属性的元素，而应该让pretty多的任何元素接收焦点，但随后的的keydown 事件实际上并不会被解雇！这是一个浏览器的具体问题。根据我的经验，一个＆LT;跨度＆GT; 将导致的keydown 和 KEYUP 事件在每一个我测试浏览器被解雇（浏览器，火狐，IE，Safari浏览器，Android浏览器，丝绸）。所以在的jsfiddle我添加了一个跨度目标元素中，把焦点上，并添加了的keydown 事件监听器吧。

Only certain form elements accept focus. You can add contenteditable or tabindex attributes to the element, and that should allow pretty much any element to receive focus, but then the keydown event won't actually get fired! This is a browser specific issue. In my experience, a <span> will cause keydown and keyup events to be fired in every browser I have tested (Chrome, Firefox, IE, Safari, Android browser, Silk). So in the jsfiddle I added a span inside the target element, put focus on that, and added the keydown event listener to it.

因此​​，如果你添加一个空＆LT;跨度＆GT; 进入你的观点，你的code可能是这个样子：

So if you added an empty <span> into your view, your code could look something like this:

var PlayerView = Backbone.View.extend({
    tagName: 'div',

    events: {
        'click .points, .assists, span.rebounds, span.steals':'addStat',
        'mouseenter': 'enter',
        'mouseleave': 'leave',
        'keydown': 'keyAction'
    },

    enter: function() {
        this.$el.addClass('hover');
        var span = this.$el.find('span');
        span.attr('tabindex', '1').attr('contenteditable', 'true');
        span.focus();
    },

    leave: function() {
        this.$el.removeClass('hover');
        var span = this.$el.find('span');
        span.removeAttr('contenteditable').removeAttr('tabindex');
        span.blur();
    },

    keyAction: function(e) {
        var code = e.keyCode || e.which;
        if(code == 65) { 
            alert('add assist')
        }
    }
});

这篇关于在Backbone.js的重点preSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！