Backbone.js 主干导航不被路由器监听，但只在加载时工作

我正在使用requirejs和主干开发一个应用程序，在索引视图（索引页面）中，我遇到了两个困难

当我像这样使用导航功能时：

导航（“仪表板/”）

如果我使用：

Backbone.history.navigate("dashBoard/");

很好用。即使在我的“路线”中，我也不会触发该功能。这是我的索引视图

define(["singleton","backbone"],function (obj,Backbone) {

    window.EDMS = obj || {};

    EDMS.index = Backbone.View.extend({
        el:$(".loginPage > section"),
        events:{
            "click #loginBtn" : "enter"
        },
        initialize:function(){
            this.$el.html(this.template());
        },
        enter:function(e){
            e.preventDefault();
            var userName = $.trim(this.$el.find("#userName").val()),
                password = $.trim(this.$el.find("#password").val());

            if(userName && password){
                Backbone.history.navigate("dashBoard/"); //only this is works
                     //this.navigate("dashBoard/") not working.
            }else{
                return false;
            }
        }
    });

    return EDMS.index;
})

但在“EDMS.routers”的控制台中，我得到了方法。。。如何将我的索引视图正确同步到路由器。。有什么帮助吗

我的路由器.js

define(["singleton","backbone","utils"], function (EDMS,Backbone,utils) {

    window.EDMS = window.EDMS || {};

    EDMS.routers = Backbone.Router.extend({
        routes:{
            "":"caller",
            "dashBoard/":"dashBoard"
        },
        initialize:function(){
            utils(["index"]);

        },
        caller:function(){
            console.log("i am called");
        },
        dashBoard:function(){
            console.log("welcome to dashBoard");
        }
    });

    return EDMS.routers;

})

我的应用程序正在require.js上初始化

require(["jquery","underscore","backbone","singleton","routers"],function ($,_,Backbone,EDMS,routers) {
    EDMS.router = new EDMS.routers();
    Backbone.history.start();
});

---

使用

requirejs

可以分离模块（您可能已经知道）。正确的方法是通过

require

访问分离的模块

当然，你的应用程序中应该有这样的内容：

require.config({
  paths: {
    jquery: 'libs/jquery/jquery',
    underscore: 'libs/underscore/underscore',
    backbone: 'libs/backbone/backbone'
  }
});

您的路由器在最终应用程序初始化中初始化，基本上代码应该如下所示：

define('routers', ["backbone","utils"], function (Backbone,utils) {

    var routers = Backbone.Router.extend({
        routes:{
            "":"caller",
            "dashBoard/":"dashBoard"
        },
        initialize:function(){
            utils(["index"]);

        },
        caller:function(){
            console.log("i am called");
        },
        dashBoard:function(){
            console.log("welcome to dashBoard");
        }
    });

    return new routers();

});

    router.on('route', function() { console.log('we have routed'); });

在你看来：

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

    var index = Backbone.View.extend({
        el:$(".loginPage > section"),
        events:{
            "click #loginBtn" : "enter"
        },
        initialize:function(){
            this.$el.html(this.template());
        },
        enter:function(e){
            e.preventDefault();
            var userName = $.trim(this.$el.find("#userName").val()),
                password = $.trim(this.$el.find("#password").val());

            if(userName && password){
                router.navigate("dashBoard/");
            }else{
                return false;
            }
        }
    });

    return index;
});

在初始化过程中

require(["jquery","underscore","backbone","indexView","routers"],function ($,_,Backbone,indexView,routers) {
    window.App = { indexView: new indexView() };
});

通过执行此操作，您将在路由器中弹出一个事件，您可以从以下任何集合/视图/模型收听该事件：

define('routers', ["backbone","utils"], function (Backbone,utils) {

    var routers = Backbone.Router.extend({
        routes:{
            "":"caller",
            "dashBoard/":"dashBoard"
        },
        initialize:function(){
            utils(["index"]);

        },
        caller:function(){
            console.log("i am called");
        },
        dashBoard:function(){
            console.log("welcome to dashBoard");
        }
    });

    return new routers();

});

    router.on('route', function() { console.log('we have routed'); });

---

我确实喜欢这个：EDMS.routers.navigate（“dashboard/”）；但是我得到一个错误：TypeError:EDMS.routers.navigate不是函数[Break On This error]EDMS.routers.navigate（“dashboard/”）；我得到的错误是：TypeError:Backbone.Router未定义（routers.js（第5行）），当我们使用require.js时，不应该使用singleton方法。。如果是这样，为什么？是的，我的答案中有一个输入错误，请再次查看我的

router

code是否有初始化路由器的代码，如

EDMS.router=new EDMS.routers（）代码中的任意位置（应该在DOM就绪方法中），而在require.js初始化时，我会自行执行该操作。更新了我的代码初始化部分。谢谢你应该使用初始化的路由器，比如
EDMS.router.navigate（…
这是我的尝试。我尝试过使用它。navigate…还有，为什么在使用requirejs时用EDMS填充全局对象？