Javascript 隐藏主干.js模型

我正在玩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 developer tools提供的控制台文本版本：

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的models属性？

这是一个控制台怪癖，但这里的核心问题很常见-您正在调用

.fetch（）

（异步加载），然后立即调用

.render（）

，期望加载数据。您需要等待数据加载后才能访问它-有几种方法可以做到这一点，但最简单的方法可能是将

success

回调传递给

fetch

：

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

---

控制台会奇怪地记录这一点，因为当您在集合尚未加载时调用

console.log

（显示

Array[0]

），但在加载完成后手动检查它（显示

Array[4]

）。

谢谢，两件事：1：该代码导致

未捕获引用错误：未定义carListView

。2：我认为“重置”事件上的绑定会导致在获取数据后调用渲染函数？1。哎呀，你说得对——看编辑。您需要将视图别名为变量，因为

此

引用在回调中不起作用。2.

reset

侦听器应该可以工作，但是您首先显式调用了

carListView.render（）

，就在调用

.fetch（）

之后。