var ShapeSizePoolView = Backbone.View.extend({
el : $('#agpb_shape_size_body'),
tmpl : $('#tmpl_agpb_shape_size').html(),
initialize : function() {
this.render();
},
render : function() {
var compiled_template = _.template( this.tmpl, this.model.toJSON() ),
sizes = this.model.get('sizes');
$(this.el).append( compiled_template );
// this is used for our pool sizes
for(var i = 0; i < sizes.length; i++) {
console.log(sizes[i]);
new ShapeSizePoolButtonView(
{
size : sizes[i],
el : $(this.el).find('.agpb_size_list')
});
}
}
});
var ShapeSizePoolButtonView = Backbone.View.extend({
tmpl : $('.tmpl_agpb_shape_size_button').html(),
initialize : function() {
// this.render();
console.log( this.size );
},
render : function() {
var compiled_template = _.template( this.tmpl, this.sizes );
$(this.el).append( compiled_template );
}
});
this.model.get('sizes') returns an array of objects. If I console.log one of the objects in ShapeSizePoolView I get:
{
id: "6",
dimensions: "12'",
price: "649.99",
sort_order: "1"
}
I pass this object to a new view but if I console.log this.size from ShapeSizePoolButtonView I get:
undefined
Does anyone have an idea of where I am going wrong?
Thanks!
From the Backbone docs :
When creating a new View, the options you pass — after being merged into any default options already present on the view — are attached to the view as this.options for future reference. There are several special options that, if passed, will be attached directly to the view: model, collection, el, id, className, tagName and attributes.
So, you can access this custom option by using this.options
:
var ShapeSizePoolButtonView = Backbone.View.extend({
tmpl : $('.tmpl_agpb_shape_size_button').html(),
initialize : function() {
// this.render();
console.log( this.options.size ); // Not this.size
},
....
});
You are passing size
to the View
constructor, but it will not get copied onto this
automatically. You would need to add code like this:
var ShapeSizePoolButtonView = Backbone.View.extend({
initialize : function(options) {
this.size = options.size;
// this.render();
console.log( this.size );
},
Also, you are incorrectly using this.sizes
instead of this.size
in your render call.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.