How to pass parameters to a view

Question

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

Answer 1

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

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

And then, in MenuView, you can use 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.

So in your initialize method, you can save the options passed as this.options:

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

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

Answer 2

Add an options argument to 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