如何将参数传递给视图

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 起，主干视图不再自动附加作为 this.options 传递给构造函数的选项，但如果您愿意，您可以自己执行此操作。

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

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

或者使用一些更好的方法，如 描述的作者：@Brave Dave。

Answer 2

将选项参数添加到 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
});

Answer 4

从其他位置传递

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

添加一个选项参数来初始化，以查看您正在获取传递的变量，

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

以获取值
使用 -

   var v = new ItemView({ pos: this.options.positions});

Answer 5

使用 this.options 在视图中检索参数

 // Place holder
 <div class="contentName"></div>

 var showNameView = Backbone.View.extend({
        el:'.contentName',
        initialize: function(){
            // Get name value by this.options.name
            this.render(this.options.name);
        },
        render: function(name){
            $('.contentName').html(name);
        }
    });

    $(document).ready(function(){
        // Passing name as argument to view
        var myName1 = new showNameView({name: 'Nishant'});
    });

工作示例：http://jsfiddle.net /Cpn3g/1771/