Выбор элементов из списка с помощью Backbone.js

Question

Довольно общий вопрос здесь, дайте мне знать, если вы хотите, чтобы я уточнил больше. У меня есть список элементов, каждый из которых отображается в виде. Когда элемент щелкнут, он подсвечивается, и представление, ответственное за этот элемент, отправляет свою модель в отдельное представление, которое отображает дополнительную информацию, относящуюся к этому элементу.

Я пытаюсь реализовать функциональность для пользователя, чтобы использовать клавиши со стрелками для переключения между элементами, но я не уверен, как это сделать.

Вот код для моего обзора:

var app = app || {}; 

app.EmployeeView = Backbone.View.extend({ 
    tagName: 'li', 
    className: 'list-group-item', 
    template: _.template('<%= Name %>'), 
    render: function() { 
    var html = this.template(this.model.attributes); 
    this.$el.html(html); 
}, 
events: { 
    "mouseover" : function() { 
     this.$el.addClass('highlighted'); 

    }, 
    "mouseout" : function() { 
     this.$el.removeClass('highlighted'); 
    }, 
    "click" : function() { 
     $('.selected').removeClass('selected'); 
     this.$el.addClass('selected'); 
     $(document).trigger('select', [this.model]); 
    }, 
}, 
}); 

Кто-нибудь есть какие-либо предложения о том, как можно реализовать с помощью клавиш со стрелками, чтобы вызвать соответствующее представление, чтобы направить свою модель?

Answer 1

У меня была очень похожая особенность для реализации моего продукта. У меня есть список изображений. Пользователь нажимает на один миниатюру и визуализирует изображение в полном размере. Там у меня также есть окно с подробной информацией об изображении, и я хотел, чтобы пользователь использовал клавиши со стрелками, чтобы просмотреть фотографии, оставаясь в полноразмерном виде. У меня также есть кнопки «prev» и «next», которые должны работать одинаково. Я думаю, что результат чист, и это то, что я сделал:

SingleEntryView = Backbone.View.extend({ 

    initialize : function() { 

     // Here I save a reference to the currentIndex by getting the index 
     // of the current model within the collection. 
     this.currentIndex = this.collection.indexOf(this.model); 

     // Important: here I attach the keydown event to the whole document, 
     // so that the user doesn't necessarily have to focus the view's 
     // element to use the arrows. 
     $document.on('keydown.singleEntry', this.onKeyDown.bind(this)); 

    }, 

    // Having attached the keydown event to document, there's no autocleaning. 
    // Overriding remove to detach the listener when the view goes away. 
    remove : function() { 

     $document.off('.singleEntry'); 

     Backbone.View.prototype.remove.call(this); 

    }, 

    // Keydown listener. Interested only in arrow keys. 
    onKeyDown : function(e) { 

     if (e.keyCode == 37) // left arrow 
      this.prev(); 
     else if (e.keyCode == 39) // right arrow 
      this.next(); 

     return true; 

    }, 

    // Click events on the prev/next buttons (they behave == to the arrow keys) 
    events : { 
     'click #prev' : 'prev', 
     'click #next' : 'next' 
    }, 

    // Handlers shared by both prev/next buttons and arrow keys. 
    // What is the current index? Go to the prev/next one. 
    // If we are at the start/end, wrap around and go to the last/first. 
    prev : function() { 
     this.goTo(this.currentIndex > 0 ? this.currentIndex - 1 : this.collection.length - 1); 
     return false; 
    }, 

    next : function() { 
     this.goTo(this.currentIndex < this.collection.length - 1 ? this.currentIndex + 1 : 0); 
     return false; 
    }, 

    goTo : function(i) { 

     this.model = this.collection.at(i); 
     this.currentIndex = i; 

     // App is my Router 
     App.navigate('app/boards/' + this.collection.id + '/entries/' + this.model.id, { 
      trigger: true 
     }); 

    } 

}