Javascript 如何将参数传递给视图

How to pass parameters to a view

提问by vikmalhotra

I have a series of buttons which when clicked display a popup menu positioned just below the button. I want to pass the position of button to the view. How can I do that?

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

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

回答by dira

You just need to pass the extra parameter when you construct the MenuView. No need to add the initializefunction.

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

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

And then, in MenuView, you can use this.options.position.

然后，在 中MenuView，您可以使用this.options.position.

UPDATE:As @mu is too short states, since 1.1.0, Backbone Views no longer automatically attach options passed to the constructor as this.options, but you can do it yourself if you prefer.

更新：由于@mu 的状态太短，从 1.1.0 开始，主干视图不再自动附加作为 this.options 传递给构造函数的选项，但如果您愿意，您可以自己完成。

So in your initializemethod, you can save the optionspassed as this.options:

所以在你的initialize方法中，你可以将options传递的保存为this.options：

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

or use some finer ways as described by @Brave Dave.

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

回答by mu is too short

Add an options argument to initialize:

将选项参数添加到initialize：

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

And then pass in some options when you create your view:

然后在创建视图时传入一些选项：

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

For more information: http://backbonejs.org/#View-constructor

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

回答by Brave Dave

As of backbone 1.1.0, the optionsargument is no longer attachedautomatically to the view (see issue 2458for discussion). You now need to attach the options of each view manually:

从主干 1.1.0 开始，该options参数不再自动附加到视图（有关讨论，请参阅问题 2458）。您现在需要手动附加每个视图的选项：

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

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

Alternatively you can use this mini pluginto auto-attach white-listed options, like so:

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

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

回答by Imtiaz Mirza

pass from other location

从其他地方通过

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

Add an options argument to initialize in view you are getting that passed variable,

添加一个选项参数以进行初始化，因为您正在获取传递的变量，

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

to get the value use -

获得价值使用 -

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

回答by Nishant Kumar

Use this.optionsto retrieve argumentr in view

使用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'});
    });

Working Example: http://jsfiddle.net/Cpn3g/1771/

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