javascript - 使用 RequireJS 拆分文件后未到达 Backbone.js ListenTo(model ,'change' ,callback) 回调

Question

我正在将工作中的 Backbone.js 应用程序拆分为模型、 View 和路由器的单独文件。

启动我的路由器:

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:未捕获类型错误:未定义不是函数
• 回调:未捕获的ReferenceError:未定义回调
• this.callback:未捕获类型错误:无法读取未定义的属性“onManualDestination”

此问题是在 Yurui 回答后编辑的。

Answer 1

好的，有几件事。

要执行 Router 的初始化方法，您必须创建一个 Router 实例，然后使用 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/