Question

所以我的问题是我的函数中从我的路由器vent / event聚合器触发的集合无法访问我的主集合的获取模型。

我的猜测是，它是一个异步调用问题，但是如何才能使它通过调用WAITS直到在执行之前获取集合/模型？或者甚至是我的问题？

这是我的相关代码。我正在使用require.js和backbone来创建模块化AMD应用程序。非常感谢你提前：

main.js

require(['views/app'], function (AppView) {
window.App = {
    Vent : _.extend({}, Backbone.Events)
};
new AppView();

router.js

    define([
        'backbone',
    ], function(Backbone){

    var MainRouter = Backbone.Router.extend({
    routes: {
      'levelone/:id':'showWork'
    },

    showWork: function (index){
      App.Vent.trigger('addressChange', {
        index: index
      });
   }
});
   return MainRouter;
});

App.js

define([
'backbone',
'views/levelone/LevelOneView',
'views/leveltwo/LevelTwoView',
'views/static/StaticView',
'router'
],
function(Backbone, LevelOneView, LevelTwoView, StaticView, MainRouter){
var AppView = Backbone.View.extend({
    el: $("body"),

    events: {
               ...
    },
    initialize: function(){                 
        new LevelOneView();
        App.router = new MainRouter();
        Backbone.history.start();
    },
   .............

LevelOneView.js

initialize:function() {
    this.getCollection();   
    this.domSetup();

    App.Vent.on('addressChange', this.addressChange, this);
},
getCollection : function(){
    var self = this;
    onDataHandler = function(collection) {
        self.LevelTwoCollectionGrab();
    };

    this.collection = new LevelOneCollection([]);
    this.collection.fetch({ success : onDataHandler, dataType: "jsonp" });
},
// We grab a Level Two Collection here so we can take the ids from it and add them to our Level One collection.
// This is necessary so we can create links between the two levels.
LevelTwoCollectionGrab: function(){
    var self = this;

    this.leveltwocollection = new LevelTwoCollectionBase([]);

    onDataHandler = function(collection){
        self.render();
        self.$el.animate({
            'opacity': 1
        }, 1200);
        self.renderLevelTwoIds();
        self.setLevelTwoids();
        self.attachLevelTwoLink();
    }
    this.leveltwocollection.fetch({success : onDataHandler, dataType: "jsonp"});
},
renderLevelTwoIds: function(){
    return this;
},
render: function(){
    var pathname = window.location.hash;

    this.setModelId(this.collection.models);
    this.addPositionsToIndex();
    this.determineModels();
    this.attachLevelTwoLink();
    ....... 
},      

addressChange: function(opts){

console.log(this.collection.models)
//returns a big fat empty array. WHY?!
}

Answer 1

您可以使用fetch返回的jQuery Promises来帮助您了解何时获取两个集合。

initialize:function() {
    this.getCollection();   
    this.domSetup();

    App.Vent.on('addressChange', this.addressChange, this);
},
getCollection : function(){
    var self = this;

    console.log('should be first');

    this.collection = new LevelOneCollection([]);
    this.fetchingLevelOne = this.collection.fetch({ dataType: "jsonp" });
    this.fetchingLevelTwo = this.leveltwocollection.fetch({ dataType: "jsonp"});

    // wait for both collections to be done fetching.
    // this one will always be called before the one in addressChange
    $.when(this.fetchingCollectionOne, this.fetchingCollectionTwo).done(function(){
        console.log('should be second');
        self.render();
        self.$el.animate({
            'opacity': 1
        }, 1200);
        self.renderLevelTwoIds();
        self.setLevelTwoids();
        self.attachLevelTwoLink();
    });
},

renderLevelTwoIds: function(){
    return this;
},
render: function(){
    var pathname = window.location.hash;

    this.setModelId(this.collection.models);
    this.addPositionsToIndex();
    this.determineModels();
    this.attachLevelTwoLink();
    ....... 
},      

addressChange: function(opts){
    var self = this;

    // wait for both collections to be done fetching.
    // this one will always be called AFTER the one in getCollection
    $.when(this.fetchingCollectionOne, this.fetchingCollectionTwo).done(function(){
        console.log('should be third');
        console.log(self.collection.models);
    });
}

这是一个很好的事情，如果用户在地址栏中输入非常快，并且进行了几次addressChange调用，他们都会等到获取集合并以正确的顺序执行

Answer 2

我想我解决了。基本上，我现在调用$ .when函数内部的函数 -

像这样：

    $.when(this.collection.fetch(), this.leveltwocollection.fetch()).done(function(){
        $.when(self.render()).done(function(){
            _.each(self.collection.models, function(model){
                var wpid = model.get('id'),
                    bbid = model.id;
                if (wpid == index){
                    window.App.InfoPos.pos5 = bbid;
                    var modelinfo = model.toJSON();
                    $('.box5').empty();
                    $('.box5').html(tmplOne(modelinfo));
                    self.$el.animate({
                        'opacity': 1
                    }, 1200);
                }
            });             
        });
    });

该函数从调用时启动，然后在完成函数执行任何操作之前等待直到完成。现在就行！感谢所有人的帮助，尤其是保罗。

Backbone，集合模型无法在从路由器Vent触发的函数中访问

2 个答案: