4

我知道主干文档说 fetch 不应该用于在页面加载时填充集合，我有点明白为什么：

var appCollection = Backbone.Collection.extend({
    model:appModel,
    url:'api/app',
    initialize:function(){
        this.fetch();
    },

});

var homeView = Backbone.View.extend({
    el:'#content',
    initialize:function(){
        this.collection = new appCollection(appModel)
        this.render()   

    },
    render: function () {
        var that = this;
        alert(1);
        _.each(this.collection.models, function (item) {
            that.renderApp(item);
         }, this);


    },

    renderApp: function (item) {
        var appview = new appView({
            model: item
        });

        this.$el.append(appview.render().el);
    }
})
 var home = new homeView();

homeview.render 函数实际上在获取集合之前被调用，所以当我删除警报（1）时；我的应用程序不会被渲染，并且我收到一些错误，说“appname”（模板）未定义。

知道怎么做吗？

fetch 方法非常方便，我不介意等待几秒钟，实际上我打算显示一个进度条指示页面正在初始化，因为我还有很多其他东西要下载，所以可以使用 fetch 和当集合被实际提取时，代码继续运行？？？

4

1 回答 1

13

让我们从头开始：

var appCollection = Backbone.Collection.extend({
    model:appModel,
    url:'api/app',
    initialize:function(){
        this.fetch();
    },

});

我会避免在里面取initialize。创建 appCollection 的实例不需要获取。所以使用：

var appCollection = Backbone.Collection.extend({
    model:appModel,
    url:'api/app',    
});

然后，

var homeView = Backbone.View.extend({
    el:'#content',
    initialize:function(){
        this.collection = new appCollection(appModel)
        this.render()   

    },
    render: function () {
        var that = this, p;
        console.log('fetching...');
        p = this.collection.fetch();
        p.done(function () {
            console.log('fetched!');
            _.each(that.collection.models, function (item) {
                that.renderApp(item);
            }, that);
        });
    },

    renderApp: function (item) {
        var appview = new appView({
            model: item
        });

        this.$el.append(appview.render().el);
    }
})
var home = new homeView();

这允许你渲染你的 homeView，当集合被获取时，它会渲染它的模型。如果你不明白是做什么p.done的，看看jQuery 的 Deferred。简而言之，ajax 请求返回一个承诺。当promise 完成时（即你的集合被获取），deferred 触发并且你指定的任何函数都.done()将执行。使用我console.log对进度提供反馈的要点。

于 2012-08-07T09:09:52.493 回答