0

我在玩backbone.js 并陷入了僵局。这是我的代码：

window.Car = Backbone.Model.extend();
window.CarCollection = Backbone.Collection.extend( {
    model: Car,
    url:"../api/car/",

});

window.CarListView = Backbone.View.extend({
    tagName:'ul',

    initialize: function() {
        this.model.on("reset", this.render);
    },

    render: function (eventName) {
        console.log(this.model);        //is an object
        console.log(this.model.models); //is an empty array

        return this;
    },
});

 // Router
var AppRouter = Backbone.Router.extend({

    routes:{
        "":"list",
        "cars/:id":"carDetails"
    },

    list:function () {
        this.carList = new CarCollection();
        this.carListView = new CarListView({model:this.carList});
        this.carList.fetch();
        $('#sidebar').html(this.carListView.render().el);
    },

});

$(function () {
    app = new AppRouter();
    Backbone.history.start();
});

我没有足够的声誉来发布图片，所以这里是来自 chrome 开发者工具的控制台的文本版本：

V r {length: 0, models: Array[0], _byId: Object, _events: Object, constructor: function…}
    > _byId: Object
    > _events: Object
    > length: 4
    > models: Array[4]
    > __proto__: s

我的问题是我正在尝试访问似乎“隐藏”在空模型后面的非空模型属性。如何访问长度为 4 的模型属性？

4

1 回答 1

1

这是一个控制台怪癖，但这里的核心问题很常见 - 您正在调用.fetch()（异步加载）然后立即调用.render()，期望加载数据。您需要等到数据加载后才能访问它 - 有几种方法可以做到这一点，但最简单的可能是将success回调传递给fetch：

var carListView = this.carListView;
this.carList.fetch({
    success: function() {
          $('#sidebar').html(carListView.render().el);
    }
});

控制台奇怪地记录了这一点，因为当您console.log在集合尚未加载时调用（显示Array[0]）但在加载完成后手动检查它（显示Array[4]）。

于 2013-04-02T17:50:59.317 回答