javascript - Backbone.js 使用集合渲染 View

Question

我是 Backbone/Require JS 的新手，我正在尝试运行基于集合的 View 。我已按照 MVC 模式将代码拆分为文件这是我的 View 代码:

文件:views/petDirectory

define([
  'jquery',
  'backbone',
  'models/pet',
  'collections/pets',
  'text!templates/pet/directory.html'
], function($, Backbone, PetModel, PetsCollection, petDirectoryTemplate){

var PetDirectoryView = Backbone.View.extend({

    el: $("#main"),
    template: _.template(petDirectoryTemplate),
    collection: new PetsCollection(),

    initialize: function() {
        var view = this;
        view.render();
    },

    render: function(){
        var view = this;
        var compiledTemplate = this.template({pets: view.collection});
        view.$el.html( compiledTemplate );
        return this;
    },
});

return PetDirectoryView;
});

数据通过模型中的 RESTful API 加载，我在 router.js 中创建 PetDirectoryView 实例。

但是我遇到了一些问题(可能是异步调用)，因为我的模板没有显示这些项目，而我的 Chrome 控制台显示如下内容:

r {length: 0, models: Array[0], _byId: Object, constructor: function, url: "http://localhost:3000/pets"…}

有什么想法吗？提前致谢!

Answer 1

当我写下问题时，我已经有了答案!感谢堆栈溢出! :D

重点是在 fetch() 中的回调函数结束之前不要渲染 View 。代码如上:

initialize: function() {
        var view = this;
        view.collection = new PetsCollection();
        view.collection.fetch({
            success: function(){
                view.render();
            }
        });
        console.log(view.collection);
        view.render();
},
render: function() { ... }