javascript - Backbone.js 使用集合渲染视图

Question

我是 Backbone/Require JS 的 n00b，我正在尝试运行基于集合的视图。我已经按照 MVC 模式将代码拆分为文件这是我的视图代码：

文件：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;
});

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

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

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

有任何想法吗？提前致谢！

Answer 1

当我写这个问题时，我有答案！感谢 StackOverflow！:D

关键是不要在 fetch() 中结束回调函数之前渲染视图。代码在上面：

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