如何将参数传递给视图

Question

我有一系列按钮,点击时会在按钮下方显示一个弹出菜单.我想将按钮的位置传递给视图.我怎样才能做到这一点？

ItemView = Backbone.View.extend({
    tagName: 'li',
    events: {
        'click': 'showMenu'
    },
    initialize: function() {
        _.bindAll(this, 'render');
    },
    render: function() {
    return $(this.el).html(this.model.get('name'));
    },
    showMenu: function() {
        var itemColl = new ItemColl();
        new MenuView({collection: itemColl}); // how to pass the position of menu here?
    }
});

Answer 1

您只需在构造MenuView时传递额外参数.无需添加initialize功能.

new MenuView({
  collection: itemColl,
  position: this.getPosition()
})

然后,在MenuView,你可以使用this.options.position.

更新:由于@mu是太短的状态,因为1.1.0,Backbone Views不再自动附加传递给构造函数的选项作为this.options,但如果你愿意,你可以自己做.

因此,在您的initialize方法中,您可以将options传递保存为this.options:

initialize: function(options) {
    this.options = options;
    _.bindAll(this, 'render');
},

或者使用@Brave Dave描述的更精细的方法.

Answer 2

添加options参数initialize:

initialize: function(options) {
    // Deal with default options and then look at options.pos
    // ...
},

然后在创建视图时传递一些选项:

var v = new ItemView({ pos: whatever_it_is});

有关更多信息:http://backbonejs.org/#View-constructor

Answer 3

从主干1.1.0开始,options参数不再自动附加到视图(请参阅问题2458以供讨论).您现在需要手动附加每个视图的选项:

MenuView = Backbone.View.extend({
    initialize: function(options) {
        _.extend(this, _.pick(options, "position", ...));
    }
});

new MenuView({
    collection: itemColl,
    position: this.getPosition(),
    ...
});

或者,您可以使用此迷你插件自动附加白名单选项,如下所示:

MenuView = Backbone.View.extend({
    options : ["position", ...] // options.position will be copied to this.position
});