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?
}
});
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.
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
this.options
gives me maintenance and debugging nightmares.
this.options
initialize: function(options) { ... }
is just fine, the change is that Backbone no longer automatically sets this.options
for you: "Backbone Views no longer automatically attach options passed to the constructor as this.options
, but you can do it yourself if you prefer.".
As of backbone 1.1.0, the options
argument is no longer attached automatically to the view (see issue 2458 for discussion). You now need to attach the options of each view manually:
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 plugin to auto-attach white-listed options, like so:
MenuView = Backbone.View.extend({
options : ["position", ...] // options.position will be copied to this.position
});
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});
Use this.options to retrieve argumentr in view
// 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/
Success story sharing
this.options
, but you can do it yourself if you prefer.".this.options.position
, notoptions.position
. Views used to attach theinitialize
arguments tothis.options
but that stopped happening in 1.1.0.