Backbone.js Require.js模块看不到主干路由器.js

在这个简单的Require/Backbone应用程序中

为什么app.js看到路由器，而TestView.js没有看到

下面是app.js的第一行

define(['router'],function (Router) {

这里是TestView.js的第一行

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

查看回购协议的全部细节，下载、运行并检查控制台日志（如果您愿意）

谢谢！ 吉姆

更多：好的，答案是——因为它的加载顺序，即使它被修改了，我也有一个循环依赖，不是吗？TestView需要路由器，路由器需要TestView

在这种情况下，解决方案可能是

var r=require('router);
r.navigate or whatever

---

但是，路由器并不是到处都可以直接访问，这似乎是一个遗憾，而且，上述方法是一个好的实践吗？

您应该在包含RequireJS配置的

main.js

文件中定义

baseUrl

属性。 这样，应用程序中模块的所有路径都将相对于该

baseUrl

见：

---

您应该在包含RequireJS配置的

main.js

文件中定义

baseUrl

属性。 这样，应用程序中模块的所有路径都将相对于该

baseUrl

见：

---

当然，这是因为循环依赖。要解决这个问题，您可以将路由器传递给视图的构造函数并从视图的模块中删除路由器依赖项，或者在视图中使用require（“路由器”）

第一个选项，router.js：

app_router.on('route:test', function () {
    var testView = new TestView({router: app_router});
    testView.render();
})

第一个选项，view.js：

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

    var TestView=Backbone.View.extend({
        el: '#test',
        initialize: function() {
            // get router from constructior options
            this.router = this.options.router
        },
        render: function(){
            this.$el.html('<p>Foo!</p>');
            console.log("TestView.js does not find 'Router',", this.router);
        }
    });

    return TestView;

});

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

    // at this point router module is not loaded yet so router is undefined

    var TestView=Backbone.View.extend({
        el: '#test',
        initialize: function() {
            // at this point router module is loaded and you may access it with require call
            this.router = require('router');
        },
        render: function(){
            this.$el.html('<p>Foo!</p>');
            console.log("TestView.js does not find 'Router',", this.router);
        }
    });

    return TestView;

});

define（['backbone']，函数（backbone）{
var TestView=Backbone.View.extend({
el:'测试'，
初始化：函数（）{
//从构造器选项获取路由器
this.router=this.options.router
},
render:function（）{
这个.el.html（“Foo！
”）；
log（“TestView.js找不到'Router'，”，this.Router）；
}
});
返回TestView；
});

第二个选项，view.js：

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

    var TestView=Backbone.View.extend({
        el: '#test',
        initialize: function() {
            // get router from constructior options
            this.router = this.options.router
        },
        render: function(){
            this.$el.html('<p>Foo!</p>');
            console.log("TestView.js does not find 'Router',", this.router);
        }
    });

    return TestView;

});

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

    // at this point router module is not loaded yet so router is undefined

    var TestView=Backbone.View.extend({
        el: '#test',
        initialize: function() {
            // at this point router module is loaded and you may access it with require call
            this.router = require('router');
        },
        render: function(){
            this.$el.html('<p>Foo!</p>');
            console.log("TestView.js does not find 'Router',", this.router);
        }
    });

    return TestView;

});

定义（['backbone'，'router']，函数（backbone，router）{
//此时，路由器模块尚未加载，因此路由器未定义
var TestView=Backbone.View.extend({
el:'测试'，
初始化：函数（）{
//此时，路由器模块已加载，您可以通过require调用访问它
this.router=require（'router'）；
},
render:function（）{
这个.el.html（“Foo！
”）；
log（“TestView.js找不到'Router'，”，this.Router）；
}
});
返回TestView；
});

---

这里还描述了第二个选项：

当然，这是因为循环依赖关系。要解决这个问题，您可以将路由器传递给视图的构造函数并从视图的模块中删除路由器依赖项，或者在视图中使用require（“路由器”）

第一个选项，router.js：

app_router.on('route:test', function () {
    var testView = new TestView({router: app_router});
    testView.render();
})

第一个选项，view.js：

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

    var TestView=Backbone.View.extend({
        el: '#test',
        initialize: function() {
            // get router from constructior options
            this.router = this.options.router
        },
        render: function(){
            this.$el.html('<p>Foo!</p>');
            console.log("TestView.js does not find 'Router',", this.router);
        }
    });

    return TestView;

});

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

    // at this point router module is not loaded yet so router is undefined

    var TestView=Backbone.View.extend({
        el: '#test',
        initialize: function() {
            // at this point router module is loaded and you may access it with require call
            this.router = require('router');
        },
        render: function(){
            this.$el.html('<p>Foo!</p>');
            console.log("TestView.js does not find 'Router',", this.router);
        }
    });

    return TestView;

});

define（['backbone']，函数（backbone）{
var TestView=Backbone.View.extend({
el:'测试'，
初始化：函数（）{
//从构造器选项获取路由器
this.router=this.options.router
},
render:function（）{
这个.el.html（“Foo！
”）；
log（“TestView.js找不到'Router'，”，this.Router）；
}
});
返回TestView；
});

第二个选项，view.js：

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

    var TestView=Backbone.View.extend({
        el: '#test',
        initialize: function() {
            // get router from constructior options
            this.router = this.options.router
        },
        render: function(){
            this.$el.html('<p>Foo!</p>');
            console.log("TestView.js does not find 'Router',", this.router);
        }
    });

    return TestView;

});

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

    // at this point router module is not loaded yet so router is undefined

    var TestView=Backbone.View.extend({
        el: '#test',
        initialize: function() {
            // at this point router module is loaded and you may access it with require call
            this.router = require('router');
        },
        render: function(){
            this.$el.html('<p>Foo!</p>');
            console.log("TestView.js does not find 'Router',", this.router);
        }
    });

    return TestView;

});

定义（['backbone'，'router']，函数（backbone，router）{
//此时，路由器模块尚未加载，因此路由器未定义
var TestView=Backbone.View.extend({
el:'测试'，
初始化：函数（）{
//此时，路由器模块已加载，您可以通过require调用访问它
this.router=require（'router'）；
},
render:function（）{
这个.el.html（“Foo！
”）；
log（“TestView.js找不到'Router'，”，this.Router）；
}
});
返回TestView；
});

---

这里还介绍了第二个选项：

我下载并检查了您的代码。以下可能是问题：

require.js

仅适用于

AMDs

。因为主干不再支持AMD。您需要使用

AMD

启用的

Backbone

版本。你可以得到它

TestView是路由器中的依赖项。因此，它在路由器加载之前加载

您可能需要改进编码模式。以下是我的建议：

App.js

define([

"骨干",， “路由器”， ]，功能（主干网、主路由器）{ "严格使用",

var AppView = Backbone.View.extend({

    initialize: function(){

        App.router = new MainRouter();
        Backbone.history.start();
    }
});

return AppView;
});

路由器.js

define([
  'backbone',
  'view/TestView'
], function(Backbone, TestView){
    var Main = Backbone.Router.extend({
        routes: {
            'test': 'test'
        },

        test: function(){
            new TestView({
                // pass model or collection to the view
                // model: new TestModel // remember to require
            });
        }

    });

    return Main;
});

编辑 收听活动：

// in main.js
var window.Vent = {};

_.extend(window.Vent, Backbone.Events);

// now in any view you can trigger a event
$('something').on('click', function(){
    window.Vent.trigger('somethinghappened', this); 
    // this is reference to current object
});

// now in other view you can do
window.Vent.on('somethinghappened', this.run, this); 
// this in the end is the reference we passed when event was triggered

run: function(obj){
    //this function will run when the event is triggered
    // obj is the object who triggered the event
}

---

PS：为什么要在视图中使用路由器？我已经构建了很多主干应用程序。从来没有必要这样做。

我下载并检查了您的代码。以下可能是问题：

require.js

仅适用于

AMDs

。由于主干不再支持

AMD

。您需要使用

AMD

启用版本的

backbone

。您可以获得它

TestView是路由器中的依赖项。因此它在路由器加载之前加载

您可能需要改进编码模式。以下是我的建议：

App.js

define([

"骨干",， “路由器”， ]，功能（主干网、主路由器）{ "严格使用",

var AppView = Backbone.View.extend({

    initialize: function(){

        App.router = new MainRouter();
        Backbone.history.start();
    }
});

return AppView;
});

路由器.js

define([
  'backbone',
  'view/TestView'
], function(Backbone, TestView){
    var Main = Backbone.Router.extend({
        routes: {
            'test': 'test'
        },

        test: function(){
            new TestView({
                // pass model or collection to the view
                // model: new TestModel // remember to require
            });
        }

    });

    return Main;
});

编辑 收听活动：

// in main.js
var window.Vent = {};

_.extend(window.Vent, Backbone.Events);

// now in any view you can trigger a event
$('something').on('click', function(){
    window.Vent.trigger('somethinghappened', this); 
    // this is reference to current object
});

// now in other view you can do
window.Vent.on('somethinghappened', this.run, this); 
// this in the end is the reference we passed when event was triggered

run: function(obj){
    //this function will run when the event is triggered
    // obj is the object who triggered the event
}

---

ps：为什么你想在路由器上使用路由器？我已经建立了很多的骨干应用程序。从来没有这样做过。

你可以使用可用的<代码>主干。历史。导航< /COD>实现你的目标更容易，因为<代码>路由器。导航< /代码>是一个简单的包装。考虑这个：

---

您可以使用可用的<代码> Brist.Ristar。导航< /代码>以实现您的目标更容易，因为<代码>路由器。导航< /代码>是一个简单的包装器。请考虑：

---

谢谢尤金，但我认为这与此无关。路由器模块被找到了，但实际上是“空的”。谢谢尤金，但我认为这与此无关。路由器模块被找到了，但