javascript - Backbone console.log 属性并将它们传递给 View

Question

我不确定我是否正确使用模型和集合。如果我不是，我真的很感激任何关于我做错的事情的指导或建议。

我已经建立了一个模型和一个集合。 Collection 有一个使用 .fetch() 方法执行的 url。我将集合传递到 View ，然后将结果记录到控制台。当我在 View 中 console.log(this.model) 时，我看到属性嵌套了几层深度。我想查看 console.log 中的属性。 .toJSON() 方法似乎不起作用。

这是我当前代码的 fiddle :http://jsfiddle.net/Gacgc/

这是 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

是this您在寻找什么？

如果您将 collection 传递给 View ，则应将其分配给 collection 属性:

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

当您尝试将 reset 事件绑定(bind)到 View 的 render 函数时，您实际上是立即调用该函数(通过包含大括号):

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

但这不是重点，因为主干的 collection 不会触发 reset 事件(请参阅 documentation )。一种方法是将 View 的渲染函数分配给传递给集合的选项对象的 success 参数:

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

最后，您的集合中需要一个 parse 函数，以从您正在加载的 JSON 中提取维度数组:

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

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

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