Định tuyến Sammy không hoạt động

Question

Tôi không thể định tuyến sammy.js hoạt động như mong đợi.

Tôi có JavaScript sau.

(function ($) { 

    var app = $.sammy('#main', function() { 

     this.get('#/', function (context) { 
      context.log("start page"); 
     }); 

     this.get("#/another/:id/", function (context) { 
      context.log("another page with id = " + context.params["id"]);   
     }); 
    }); 

    $(function (context) { 
     app.run('#/'); 
    }); 

})(jQuery); 

sự hiểu biết của tôi là bất cứ khi nào địa chỉ URL có những thay đổi, và chừng nào con đường mới tương ứng với một trong những tuyến đường tuyên bố, sau đó tôi sẽ thấy thông điệp có liên quan trong giao diện điều khiển đăng nhập.

Nhưng tôi thì không.

Khi trang tải lần đầu tiên tôi có thể thấy thông báo "trang bắt đầu". Càng xa càng tốt.

Nếu tôi sau đó

• nhấp chuột vào một liên kết trỏ tới [url của tôi]/#/khác/1/
• tay gõ [url của tôi]/#/khác/1/vào địa chỉ bar và nhấn Enter < >

... không có gì xảy ra, tức là tôi không thấy thông báo cho con đường thứ hai.

Tuy nhiên, với tuyến đường thứ hai trong thanh địa chỉ, nếu bây giờ tôi nhấn F5 hoặc nhấp vào nút làm mới của trình duyệt, sau đó trang sẽ tải lại và hiển thị thông báo bảng điều khiển dự kiến.

Tôi đã hiểu lầm, hoặc không nên Sammy nhận thấy khi một siêu liên kết hoặc bàn phím đã thay đổi giá trị băm URL, và sau đó hành động tương ứng? Có cái gì khác mà tôi cần phải thêm vào kịch bản của tôi?

Answer 1

Mỗi ứng dụng sammy cần được đính kèm vào phần tử DOM.

Vì vậy, có thể bạn đang thiếu mẫu #main tạo thành trang của mình.

Vì vậy, bạn cần phải thêm một yếu tố #main trong DOM của bạn ở đâu đó:

<div id="main"> 
</div> 

hoặc bạn cần phải khởi tạo sammy mà không có một selector

var app = $.sammy(function() { 

    this.get('#/', function (context) { 
     context.log("start page"); 
    }); 

    this.get("#/another/:id/", function (context) { 
     context.log("another page with id = " + context.params["id"]); 
    }); 
}); 

nó trường hợp này nó tự gắn nó với các yếu tố body .

Live Demo.