javascript - Backbone : Pass Model Attribute to a View returns undefined

Question

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') 返回一个对象数组。如果我 console.log ShapeSizePoolView 中的对象之一，我得到:

{
    id: "6", 
    dimensions: "12'",
    price: "649.99", 
    sort_order: "1"
} 

我将此对象传递给新 View ，但如果我从 ShapeSizePoolButtonView console.log this.size 我得到:

undefined

有没有人知道我哪里出错了？

谢谢!

Answer 1

来自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.

因此，您可以使用 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
    },
    ....
});