0

I'm building a small application with backbone js, with a grid that should be navigable using the keyboard. I can't get anything on keypress or keyup events in the views.

Here is the code:

// ALL DETAILS VIEW [wrapper]
App.Views.Details = Backbone.View.extend({
    tagName: 'div',

    initialize: function() {
        this.collection.on( 'add', this.addOne, this );
    },

    events: {
        'keypress': 'keyAction',
    },

    render: function() {
        this.collection.each( this.addOne, this );
        return this;
    },

    addOne: function(detail) {
        var detailView = new App.Views.Detail({ model: detail, collection: this.collection });
        this.$el.append(detailView.render().el);
    },

    keyAction: function(e) {
        console.log('here');
    }
});

// SINGLE DETAIL VIEW
App.Views.Detail = Backbone.View.extend({
    tagName: 'div',

    template: template('detailView'),

    initialize: function() {
        this.model.on( 'change', this.render, this );
    },

    edit: function(e) {
        var field = $(e.target).closest('.editable');
        field.addClass('editing');

        field.find('input').focus().select();
    },

    render: function() {
        this.$el.html( this.template( this.model.toJSON() ) );
        return this;
    }
});

App.Views.Details contains one or many App.Views.Detail. It should be able to navigate each view using the arrow keys, but no events are seen in App.Views.Details.

Maybe this isn't the right way to do this, but I'm new at backbone and I'm open for suggestions. Thank you in advance :)

JWP
  • 6,672
  • 3
  • 50
  • 74
GigaC
  • 39
  • 2
  • 8
  • Are you sure that your view is rendered and attached to DOM? – vvahans Jun 25 '16 at 20:29
  • 2
    More info on keypress here: http://stackoverflow.com/questions/20716189/keypress-in-backbone-js – bvoleti Jun 25 '16 at 21:00
  • Yes it is @VahanVardanyan. Yeah, I check it out before, but I didn't want to do this `$(document).bind('keydown', this.on_keypress);`. I though it can be posible via the `events: { ... }` @bvoleti – GigaC Jun 25 '16 at 21:07
  • 1
    @GigaC actually it's possible, but the entire element should be focused or set the tabindex. [Here](https://jsfiddle.net/vvahans/khqd7zfo/) is the fiddle that you can play with. – vvahans Jun 25 '16 at 21:10
  • I think the whole problem is that my elements are
    and it is not possible to focus on them :/ I got a table generated with divs :/ As I said I am very new in this. thank you anyway :* @VahanVardanyan
     – GigaC Jun 25 '16 at 21:19

0 Answers0