Question

我使用Backbone / Require JS是n00b，我正在尝试运行基于集合的View。我按照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;
});

数据通过模型中的REST 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() { ... }

Backbone.js使用集合呈现视图

1 个答案: