使用Backbone.js从列表中选择元素

Selecting elements from a list with Backbone.js

本文关键字：选择 元素 列表 Backbone js 使用      更新时间：2023-09-26

这里有一个很一般的问题，如果你想让我详细说明，请告诉我。我有一个元素列表，每个元素都由一个视图渲染。单击某个元素时，该元素会高亮显示，负责该元素的视图会将其模型发送到一个单独的视图，该视图会显示与该元素相关的其他信息。

我正在尝试为用户实现使用箭头键在元素之间切换的功能，但我不确定如何做到这一点。

这是我的视图代码：

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

有人对我如何使用箭头键触发适当的视图来转发其模型有什么建议吗？

我有一个非常相似的功能要为我的产品实现。我有一个图片列表。用户单击一个缩略图并将图像显示为全尺寸。在那里，我还有一个显示图片信息的详细框，我希望用户在保持全尺寸视图的同时使用箭头键浏览图片。我还有"上一个"answers"下一个"按钮，它们的工作原理应该相同。我认为结果是清白的，这就是我所做的：

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
        });
    }
}
相关文章：