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

我有一个非常类似的功能来实现我的产品。我有一个图像列表。用户单击一个缩略图并可视化图像的完整大小。在那里，我还有一个显示图片信息的详细信息框，我希望用户在保持全尺寸视图的同时使用箭头键来完成图片。我也有“上一个”和“下一个”按钮应该工作相同。我认为结果很干净，这就是我所做的：

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

    }

}

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

1 个答案: