Làm cách nào để truy cập bộ định tuyến toàn cầu trong js đường trục?

Question

Đây là tệp app.js của tôi. Tôi cần truy cập phương thức navigate của bộ định tuyến từ trong phương thức navigateToLogin của lớp LandingView. Nhưng kể từ khi appRouter được định nghĩa sau khi xem nó không thể nhận ra router từ bên trong khung nhìn. Vì vậy, tôi cần phải tìm một cách để truy cập toàn cầu router từ bất kỳ lớp hoặc phương pháp nào. Làm thế nào tôi có thể giải quyết vấn đề này?

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

Nếu bạn đào vào mã Backbone của một chút, bạn sẽ nhận thấy rằng việc thực hiện của router của navigate lần lượt gọi Backbone.history.navigate:

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

Vì vậy, thay vì mucking một cách rõ ràng lên phạm vi toàn cầu, sử dụng Backbone.history.navigate:

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

Answer 2

Nếu bạn cần appRouter để có thể truy cập trên toàn cầu, bạn phải đính kèm nó vào một số đối tượng toàn cầu. Trong trình duyệt web, đây là đối tượng window.

window.app = new appRouter(); 

Và truy cập nó qua cửa sổ:

window.app.navigate(...); 

Sử dụng globals có thể dẫn đến mã đó là khó khăn để duy trì. Nếu ứng dụng của bạn không có kích thước nhỏ, hãy xem xét sử dụng một số cơ chế tách, chẳng hạn như mediator pattern.