Quản lý đường dẫn phía trước - BackboneJS Router

Ngày cập nhật: 12/12/2015 | Số lần đọc: 47.798 | Phân loại: BackboneJS
Tìm kiếm

1
2

/stock#enter  
/stock#per/20150330/600637

Phần #enter, #per/20150330/600637 trong đó chính là các đường dẫn phía trước (front-end route). Đây là phần nằm sau dấu thăng (#) trong URL và được sử dụng để điều hướng nội dung mà không cần tải lại toàn bộ trang web.

Khi nào nên sử dụng đường dẫn phía trước?

Hay nói cách khác, ý nghĩa thực sự của đường dẫn phía trước là gì?
Đường dẫn phía trước cơ bản là để kích hoạt một đoạn mã nhất định. Bạn hoàn toàn có thể dùng sự kiện onClick để làm việc tương tự. Tuy nhiên, khi bạn kích hoạt bằng onClick, trạng thái hiện tại sẽ không thể chia sẻ với người khác, không thể lưu dưới dạng bookmark, hay chuyển đổi từ chức năng này sang chức năng khác trong cùng một ứng dụng đơn trang (SPA). Trong khi đó, với đường dẫn phía trước, bạn có thể dễ dàng chia sẻ link hoặc lưu trữ vị trí cụ thể trong ứng dụng.

Cấu hình BackboneJS Router như thế nào?

Dưới đây là ví dụ về cách khai báo một router trong Backbone:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

var StockSelector = Backbone.Router.extend({
 routes: {
  "enter":        "enter",     // #enter
  "per/:date/:stockID":  "per",      // #per/20150330/600637
  "*actions":       "defaultRoute"  // #default
 },
 enter: function() {
  ...
 },
 per: function(date, stockID) {
  ...
 }
 
});
new StockSelector();
Backbone.history.start();  // Theo dõi sự kiện hashchange và phân phát các tuyến đường

Trong đoạn code trên:

• "enter" sẽ khớp với #enter.
• "per/:date/:stockID" khớp với #per/20150330/600637, trong đó :date và :stockID là các tham số động.
• "*actions" là một tuyến mặc định để bắt bất kỳ URL nào không khớp với các tuyến đã liệt kê.

Sau khi khởi tạo đối tượng Router, bạn cần gọi Backbone.history.start() để bắt đầu theo dõi các thay đổi trên hash và thực thi các hàm xử lý phù hợp.

Những hành động nào sẽ được kích hoạt khi thay đổi đường dẫn?

Khi URL thay đổi theo đúng định dạng đã cấu hình, các phương thức tương ứng trong Router sẽ được gọi. Điều này thường được sử dụng để tạo ra các view mới hoặc cập nhật giao diện người dùng.

Làm thế nào để thay đổi URL mà không lưu vào lịch sử trình duyệt?

Bạn có thể truyền thêm tham số replace: true vào phương thức navigate để thay thế URL hiện tại mà không lưu vào lịch sử:

1

app.navigate("enter", {trigger: true, replace: true});

Lúc này, hành động điều hướng sẽ không xuất hiện trong danh sách lùi/lướt của trình duyệt.

Backbone.history.start hoạt động như thế nào?

Hàm Backbone.history.start() sẽ lắng nghe sự kiện hashchange trên trình duyệt. Khi hash trong URL thay đổi, nó sẽ kiểm tra xem có tuyến nào khớp không, và nếu có, sẽ kích hoạt hàm xử lý tương ứng.

TODO: Sự kiện hashChange?

Tổ chức code như thế nào khi sử dụng Router?

Khi tích hợp Backbone.Router vào dự án, bạn có thể tổ chức code như sau:

• Chỉ cần khởi tạo một instance Router trong file chính như main.js.
• Router sẽ chịu trách nhiệm load các view khác nhau tùy thuộc vào đường dẫn hiện tại.
• Mỗi view có thể được quản lý riêng biệt và gắn với một tuyến đường cụ thể.

Một số mẹo tổ chức project lớn với Backbone.js:

• Sử dụng convention đặt tên namespace để tránh xung đột giữa các module.
• Áp dụng mẫu backbone-boilerplate để chuẩn hóa cấu trúc dự án.
• Tham khảo tài liệu và bài viết về cách xây dựng ứng dụng Backbone lớn.

Tài liệu

• Tài liệu chính thức của Backbone.Router
• Bài viết: “Router là gì?”
• Các ví dụ và giải thích chi tiết từ cộng đồng Backbone.js

Nếu bạn đang tìm hiểu về BackboneJS và muốn tối ưu hóa điều hướng trong ứng dụng đơn trang, thì việc nắm vững cách sử dụng Backbone.Router là rất quan trọng. Với những kiến thức cơ bản ở trên, bạn đã có thể bắt đầu thiết kế hệ thống đường dẫn thông minh cho ứng dụng của mình!