1

这里的问题很笼统，如果您希望我详细说明，请告诉我。我有一个元素列表，每个元素都由一个视图呈现。单击一个元素时，它会突出显示，并且负责该元素的视图将其模型发送到一个单独的视图，该视图显示与该元素相关的附加信息。

我正在尝试为用户实现使用箭头键在元素之间切换的功能，但我不确定如何执行此操作。

这是我的视图的代码：

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

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

4

1 回答 1

2

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

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

    }

}
于 2013-08-14T09:51:27.593 回答