骨干console.log属性，并将它们传递给View

Question

I am not sure if I am using Models and Collections correctly. If I'm not I would really appreciate any guidance or advice into what I am doing wrong.

I have set up a Model and a Collection. The Collection has a url which is executed using the .fetch() method. I pass the Collection to the View where I log the results to the console. When I console.log(this.model) in the View I see the attributes nested a few levels deep. I would like to see the attributes in the console.log. The .toJSON() method doe not seem to work.

Here's a Fiddle to my current code: http://jsfiddle.net/Gacgc/

Here is the JS:

(function () {

    var DimensionsModel = Backbone.Model.extend();

    var setHeader = function (xhr) {
        xhr.setRequestHeader('JsonStub-User-Key', '0bb5822a-58f7-41cc-b8a7-17b4a30cd9d7');
        xhr.setRequestHeader('JsonStub-Project-Key', '9e508c89-b7ac-400d-b414-b7d0dd35a42a');
    };

    var DimensionsCollection = Backbone.Collection.extend({
        model: DimensionsModel,

        url: 'http://jsonstub.com/calltestdata'
    });

    var dimensionsCollection = new DimensionsCollection();

    var DimensionsView = Backbone.View.extend({
        el: '.js-container',

        initialize: function (options) {
            this.model.fetch({beforeSend: setHeader});

            _.bindAll(this, 'render');
            this.model.bind('reset', this.render());

             return this;
        },

        template: _.template( $('#dimensions-template').html() ),

        render: function () {
            console.log( this.model.toJSON() ); //Why does this return an empty array???

            return this;
        }

    });

    var myView = new DimensionsView({model: dimensionsCollection});

}());

Answer 1

Is this what you're looking for?

If you're passing a collection to the view you should assign it to the collection property:

// It's a collection. Backbone views have a collection 
// property. We should totally use that!
var myView = new DimensionsView({collection: dimensionsCollection});

When you attempt to bind the reset event to your view's render function, you're actually invoking the function immediately (by including the braces):

// Omit the braces to assign the function definition rather than invoke 
// it directly (and immediately) 
this.model.bind('reset', this.render);

But that's beside the point, because backbone's collection doesn't trigger a reset event (see documentation ). One approach would be to assign the view's render function to the success parameter of the options object you pass to your collection:

var self = this;
this.collection.fetch({
    beforeSend: setHeader, 
    success: function() {
        self.render();
    }
}); 

Finally, you need a parse function in your collection to pull the dimensions array out of the JSON you're loading:

var DimensionsCollection = Backbone.Collection.extend({
    model: DimensionsModel,

    url: 'http://jsonstub.com/calltestdata',

    parse: function(response) {
         return response.dimensions;    
    }
});