Question

这是我的app.js文件。我需要从navigate类的navigateToLogin方法中访问路由器的LandingView方法。但由于appRouter是在视图之后定义的，因此无法从视图中识别路由器。所以我需要找到一种从任何类或方法全局访问路由器的方法。我怎样才能解决这个问题呢？

var LandingView = Backbone.View.extend({
    tagName: 'div', 
    id: 'landing',
    className: 'landingpad',
    events: {
        'click button#login': 'navigateToLogin',
    },
    render: function (){

        (this.$el).append("<button class='button' id='login'>Login</button><br/><br/><br/>");
        (this.$el).append("<button class='button' id='new'>New User?</button>");

        console.log(this.el);
        return this;
    },
    navigateToLogin: function(e){
        app.navigate("/login", true);
        return false; 
    },
});

var appRouter = Backbone.Router.extend({

initialize: function(){
    $('#content').html(new LandingView().render().el);
}
});

    app = new appRouter();

Answer 1

如果您稍微深入了解Backbone的代码，您会发现路由器的navigate实现依次调用Backbone.history.navigate：

// Simple proxy to `Backbone.history` to save a fragment into the history.
navigate: function(fragment, options) {
  Backbone.history.navigate(fragment, options);
}

因此，请使用Backbone.history.navigate：

，而不是明确地删除全局范围

var LandingView = Backbone.View.extend({
    ...
    navigateToLogin: function(e){
        Backbone.history.navigate("/login", true);
        return false; 
    },
});

Answer 2

如果您需要全局访问appRouter，则必须将其附加到某个全局对象。在Web浏览器中，这是window对象。

window.app = new appRouter();

并通过窗口访问它：

window.app.navigate(...);

使用全局变量会导致代码难以维护。如果您的应用规模不是很小，请考虑使用一些解耦机制，例如mediator pattern。

如何在骨干网中全局访问路由器？

2 个答案: