Wygląda na to, że naciśnięcie klawisza może być wykonane tylko na elemencie fokusu? Nie w pełni się do tego zaliczam, musi istnieć sposób na wykonanie zdarzenia związanego z naciśnięciem klawisza, podobnego do zdarzenia kliknięcia?

Mam widok, który działa z jednym elementem naraz. mammouseenter - mouseleave funkcja, która dodaje klasę do elementu, nad którym mysz się kończy. Gdy przedmiot otrzyma tę klasę, chcę móc użyć zdarzenia naciśnięcia klawisza, aby uruchomić funkcję na tym elemencie.

Oczywiście jest to niewielka przeszkoda, ale chciałbym dowiedzieć się, co muszę zrobić. Poniżej znajduje się przykładowy widok.

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')
        }
    }
});

Więc nie ma tu zbyt wiele logiki, ale myślę, że napisałbym coś takiego

    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});
        }
    }

Zasadniczo Gdybym mógł wymyślić, jak to odpalićkeyAction metoda powinna być dobra. Jakie są więc pewne zastrzeżenia, których brakuje mi przy wykonywaniu takiego kodu? Jestem pewien, że jest ich kilka.

Rozumiem, co jest nie tak z tym kodem, nie ma sposobu, aby wiedzieć, kiedy uruchamiamy naciśnięcie klawisza w tym widoku, musiałbym dodać warunek lub coś, aby znaleźć aktywną klasę, więc kiedy wykonam naciśnięcie, wie, co model, o którym mówię, bardzo niejasny opis tutaj, ale rozumiem, że coś jest nie tak, po prostu nie jestem pewien, jak to zrobić?

Moje rozwiązanie

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});
        }
    }
}

To jest fajne dla mojej aplikacji, ponieważ gdy użytkownik najeżdża na element, użytkownik może nacisnąć klawisz, aby dodać dane, zamiast klikać.