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

时间:2014-03-11 22:48:19

标签: javascript backbone.js

我不确定我是否正确使用模型和集合。如果我不是,我会非常感谢我对我做错的任何指导或建议。

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

这是我当前代码的小提琴: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});

}());

1 个答案:

答案 0 :(得分:1)

this您要找的是什么?

如果您将collection传递给视图,则应将其分配给collection媒体资源:

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

当您尝试将reset事件绑定到视图的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)。一种方法是将视图的渲染函数分配给传递给集合的选项对象的成功参数:

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;    
    }
});