Backbone.js listenTo（model，'change'，callback）在分割帶有RequireJS的文件後未達到回調

Question

我將我工作的Backbone.js應用程序拆分爲模型，視圖和路由器的單獨文件。

開始我的路由器：

window.App = Backbone.View.extend({ 
    initialize: function() { 
     require(["routers/my-router"], function (MyRouter) { 
      var myRouter = new myRouter(); 
      Backbone.history.start(); 
     }); 
    } 
}); 

在我的路由器文件routers/my-router.js，我正在聽的模型的變化事件：

define(function (require) { 
"use strict"; 
var $   = require('jquery'), 
    _   = require('underscore'), 
    Backbone = require('backbone'); 

return Backbone.Router.extend({ 
    initialize: function() { 
     var self = this; 
     require([], 
      function(){ 
       var model = new Backbone.Model.extend({}); 
       self.listenTo(model, 'change', self.callback); 
       model.trigger('change'); 
      } 
     ); 
    }, 

    callback: function() { 
     console.log('callback reached!'); 
    } 
}); 
}); 

我收到以下錯誤定義不同的方式回調：

• self.callback：Uncaught TypeError: undefined is not a function
• callback：Uncaught ReferenceError: callback is not defined
• this.callback：Uncaught TypeError: Cannot read property 'onManualDestination' of undefined

這個問題是玉蕊的答案後，編輯。

Answer 1

好吧，幾件事情。

執行路由器的initialize方法，你必須創建一個路由實例，然後使用Backbone.history.start（），像這樣：

//define router: 
var Router = Backbone.Router.extend({}); 

//instantiate a router 
new Router(); 

//start router! 
Backbone.history.start(); 

在你的榜樣，路由器不是實例，也沒有開始。 也不會觸發模型更改。

這裏是我的工作示例：

//define a model. 
var Model = Backbone.Model.extend({}); 

//define a router 
var Router = Backbone.Router.extend({ 
    initialize: function() { 
     var self = this; 

     setTimeout(function() { 
      var myModel = new Model({}); 
      self.listenTo(myModel, 'change', self.callback); 

      //triggers change right away so you can see the callback output 
      myModel.trigger('change'); 
     }, 1000); 
    }, 
    callback: function() { 
     console.log('Callback reached!'); 
    } 
}); 

//instantiate the router! 
new Router(); 

//here's when router.initialize() is called. 
Backbone.history.start(); 

注：我用setTimeout來替換使用的requirejs但它不應該影響這個例子什麼。

的jsfiddle：http://jsfiddle.net/4KLCZ/