2013-04-18 35 views
11

Tôi bắt đầu học Backbonejs gần đây, bằng cách đọc một cuốn sách. và tôi cảm thấy một chút nhầm lẫn chút về issue.Here đây là một Router:Tôi nên sử dụng cái nào? Backbone.js Router.navigate và window.location.hash

define(['views/index', 'views/login'], function(indexView, loginView) { 

    var SelinkRouter = Backbone.Router.extend({ 

     currentView: null, 

     routes: { 
      'home': 'home', 
      'login': 'login' 
     }, 

     changeView: function(view) { 
      if(null != this.currentView) 
       this.currentView.undelegateEvents(); 
      this.currentView = view; 
      this.currentView.render(); 
     }, 

     home: function() { 
      this.changeView(indexView); 
     }, 

     login: function() { 
      this.changeView(loginView); 
     } 
    }); 

    return new SelinkRouter(); 
}); 

và đây là phương pháp khởi động của một ứng dụng:

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

    var initialize = function() { 
     // Require home page from server 
     $.ajax({ 
      url: '/home',   // page url 
      type: 'GET',   // method is get 
      dataType: 'json',  // use json format 
      success: function() { // success handler 
       runApplicaton(true); 
      }, 
      error: function() { // error handler 
       runApplicaton(false); 
      } 
     }); 
    }; 

    var runApplicaton = function(authenticated) { 

     // Authenticated user move to home page 
     if(authenticated) window.location.hash='home'; 
          //router.navigate('home', true); -> not work 

     // Unauthed user move to login page 
     else window.location.hash='login'; 
      //router.navigate('login', true); -> not work 

     // Start history 
     Backbone.history.start(); 
    } 

    return { 
     initialize: initialize 
    }; 
}); 

Câu hỏi của tôi là về phần runApplication. Ví dụ về cuốn sách mà tôi đọc đã truyền router thành mô-đun giống như thế này, nhưng nó đã sử dụng window.location.hash = "XXX" và bộ định tuyến không hề bị xúc động.

Tôi nghĩ phương pháp "điều hướng" sẽ làm cho trình duyệt di chuyển đến trang tôi đã chỉ định, nhưng không có gì xảy ra. Tại sao?

Và vì lợi ích thực hành tốt nhất, cách tốt nhất để đạt được chuyển động giữa các trang (hoặc chế độ xem) là gì?

cảm ơn mọi ý tưởng.

Trả lời

12

Theo tài liệu, nếu bạn cũng muốn gọi hàm thuộc về một lộ trình cụ thể mà bạn cần phải vượt qua tùy chọn trigger: true:

Bất cứ khi nào bạn đạt đến một điểm nào đó trong ứng dụng của bạn mà bạn muốn lưu làm URL, điều hướng cuộc gọi để cập nhật URL. Nếu bạn muốn cũng gọi hàm tuyến đường, hãy đặt tùy chọn kích hoạt thành true. Để cập nhật URL mà không tạo mục nhập trong lịch sử của trình duyệt, hãy đặt tùy chọn thay thế thành true.

mã của bạn sẽ giống như thế:

if(authenticated) 
    router.navigate('home', {trigger: true}); 

Khi router của bạn được tạo ra, bạn cũng phải gọi

Backbone.history.start(); 

Backbone.history.start ([tùy chọn])

Khi tất cả các Bộ định tuyến của bạn có được tạo và tất cả các tuyến đường được thiết lập đúng cách, hãy gọi Backbone.history.start() để bắt đầu theo dõi các sự kiện băm và các tuyến điều phối.

Cuối cùng logic runApplication sẽ là một cái gì tương tự như sau:

var runApplicaton = function(authenticated) { 

    var router = new SelinkRouter(); 
    // Start history 
    Backbone.history.start(); 

    // Authenticated user move to home page 
    if(authenticated) 
     router.navigate('home', true); 
    // Unauthed user move to login page 
    else 
     router.navigate('login', true); 
} 
+0

cảm ơn, akoskm. như bạn đã nói, tôi đã thử di chuyển Backbone.history.start() ở phía trước router.navigate(), và nó đã hoạt động. vì vậy tôi phải bắt đầu lịch sử trước khi điều hướng đến một nơi nào đó, đúng không? –

+0

@HetfieldJoe Đó là quyền bắt đầu theo dõi các sự kiện hashchange (chuyển hướng), bạn phải bắt đầu 'Backbone.history', xem báo từ tài liệu ở trên. –

+0

to và rõ ràng. cảm ơn, anh bạn. –

18

Bạn cũng có thể sử dụng phương thức tĩnh để tránh sự phụ thuộc bộ định tuyến (trong khi sử dụng requirejs ví dụ).

Backbone.history.navigate(fragment, options) 

Bằng cách này, bạn chỉ cần:

// Start history 
Backbone.history.start(); 

// Authenticated user move to home page 
if(authenticated) 
    Backbone.history.navigate('home', true); 
// Unauthed user move to login page 
else 
    Backbone.history.navigate('login', true); 
+0

chỉ thay đổi, không phải phần nội dung –

Các vấn đề liên quan