backbone.js - 无法在从路由器 Vent 触发的功能中访问主干、集合模型

Question

所以我的问题是，从我的路由器通风口/事件聚合器触发的函数中的集合无法访问我的主集合的获取模型。

我的猜测是这是一个异步调用问题，但我怎样才能做到这一点，以便通风函数调用 WAITS，直到在执行之前获取集合/模型？或者这甚至是我的问题？

这是我的相关代码。我正在使用 require.js 和主干创建模块化 AMD 应用程序。非常感谢您:

main.js

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

路由器.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;
});

应用程序.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进行调用时，它们都会等到集合被提取并以正确的顺序执行。