等待集合获取主干中的所有内容

时间:2012-05-08 01:11:49

标签: backbone.js

我有两套收藏品。一个用于类别,另一个用于项目。我等待类别完成为我提取所有内容以设置要获取的项目的类别。

此外,每当我点击一个类别时,我必须重新获取一个新的项目集合,因为我每次点击一个不刷新的类别或重新获取该集合时都会进行分页,因此分页代码会搞乱错误的收藏。有什么想法吗?

this.categoryCollection = new CategoryCollection();
this.categoryCollection.fetch();

this.itemCollection = new ItemCollection();
this.itemCollection.fetch();

6 个答案:

答案 0 :(得分:56)

刚遇到类似的情况。我最终将jquery.ajax参数传递给fetch()调用。您可以使第一次获取同步。来自backbone docs

  

jQuery.ajax选项也可以直接作为提取选项

传递

您的代码可以简化为:

this.categoryCollection.fetch({async:false});
this.itemCollection.fetch();

答案 1 :(得分:15)

一种快捷的方法是将回调传递给第一个调用第二个fetch()的调用。 fetch()使用支持options(和success)回调的error对象。

var self = this;
this.categoryCollection = new CategoryCollection();
this.categoryCollection.fetch({
    success: function () {
        self.itemCollection = new ItemCollection();
        self.itemCollection.fetch();
    }
});

不是最优雅,但它有效。您可以使用延迟来执行一些创造性的事情,因为fetch()会返回由发生的$.ajax调用创建的jQuery延迟。

对于分页问题,​​如果没有看到您的分页代码在做什么就很难分辨。你将不得不自己滚动分页内容,因为Backbone本身不支持它。我可能要做的是为正在查询的页面条件创建一个新的Collection,并可能创建一个我可以命中的服务器操作,它将支持分页(将Collection的url映射到分页服务器操作)。不过,我并没有考虑过这个问题。

答案 2 :(得分:2)

由于那里的答案,我不得不对这个帖子做出反应。

这只是做正确的方式!!!

this.categoryCollection = new CategoryCollection();
this.itemCollection = new ItemCollection();

var d1 = this.categoryCollection.fetch();
var d2 = this.itemCollection.fetch();

jQuery.when(d1, d2).done(function () {
     // moment when both collections are populated
     alert('YOUR COLLECTIONS ARE LOADED :)'); 
});

通过这样做,您可以同时获取两个集合,并且当两者都准备好时您可以拥有事件。所以你不要等到完成加载第一个集合才能获取其他集合,你没有在其他答案中看到ajax调用同步等等!

以下是Deferred objects上的文档。

注意:在此示例中,当一个或多个延迟对象失败时,它不会被覆盖。如果您想在.done旁边覆盖该情况,则必须在.fail添加.when回调,并添加error处理程序,在此示例中将标记失败的d1或d2

答案 3 :(得分:0)

我使用的是RelationalModel,我创建了一个排队的fetch,只在完成加载时调用'change'事件:

var MySuperClass = Backbone.RelationalModel.extend({
    //...

    _fetchQueue : [],

    fetchQueueingChange : function(name){
        //Add property to the queue
        this._fetchQueue.push(name);
        var me = this;

        //On fetch finished, remove it
        var oncomplete = function(model, response){
            //From _fetchQueue remove 'name'
            var i = me._fetchQueue.indexOf(name);
            me._fetchQueue.splice(i, 1);

            //If done, trigger change
            if (me._fetchQueue.length == 0){
                me.trigger('change');
            }
        };

        this.get(name).fetch({
            success: oncomplete, 
            error : oncomplete
        });
    },

    //...


});

班级会打电话:

this.fetchQueueingChange('categories');
this.fetchQueueingChange('items');

我希望你能改进这一点,对我来说效果很好。

答案 4 :(得分:0)

我今天遇到了同样的问题,并找到了解决方案:

var self = this;
this.collection = new WineCollection();
this.collection.url = ApiConfig.winetards.getWineList;
this.collection.on("reset", function(){self.render()});
this.collection.fetch({reset: true});

现在,当对集合的提取完成时,"重置"触发并重置"重置"为视图调用render()方法。

使用{async: false}不是处理Backbone的fetch()的理想方式。

答案 5 :(得分:-10)

只需将jQuery设置为同步

$.ajaxSetup({
  async: false
});   
this.categoryCollection.fetch();
this.itemCollection.fetch();
$.ajaxSetup({
  async: true
});

我猜这是最简单的解决方案。当然,在这些提取运行时启动新请求也将同步启动,这可能是您不喜欢的。