Sammyjs和pagerjs路線

Question

我開始使用KnockoutJS（2.2.1），SammyJS（0.7.4）和PagerJS（最新的github和jquery hashchange）的組合來創建單頁應用程序，並且我已經遇到路由存在問題，因爲它們在Chrome版本24.0.1312.57 m或Firefox 16.0中不起作用（由於某些原因，它實際上在IE7中運行）。

使用sammyjs我已經指定了應用程序應對的路線及其相應的操作，例如加載用戶數據。 pagerjs使用相同的路由來指定要顯示的頁面。出於某種原因，sammyjs代碼被執行，但不是pagerjs代碼。

當更新的途徑，例如去從#!/到#!/user，pagerjs不切換到新的頁面，但#!/user?uid=123和#!/user?uid=321之間切換時，如預期的數據將被更新。但是，當刪除sammyjs代碼時，它的工作原理 - 頁面之間的切換正常，但數據當然不會正確更新。

看起來SammyJS終止了pagerjs的進一步執行，但由於我對這些庫很陌生，所以很可能是我的代碼行爲異常。對任何見解都很有幫助。

的JavaScript代碼看起來是這樣的：

var UserModel = function() { 

     var self = this; 
     self.userId = null; 
     self.user = ko.observable(); 
     self.userid = ko.observable(); 

     // Load 
     self.load = function(userId) { 
      self.loadUser(userId); 
     }; 

     // Load user data 
     self.loadUser = function(userId) { 
     console.log('Loading user data'); 
     }; 

     // Client-side routes  
     Sammy(function() { 

      // Overview - datatables in tabs 
      this.get('#!/', function() { 
       console.log('Start page'); 
      }); 

      // User - details 
      this.get('#!/user', function() { 
       console.log('user page'); 
       self.userId = this.params.uid; 
       self.load(self.userId); 
      }); 

     }).run(); 


    } 

// Renders user info 
$(document).ready(function() { 
    if ($('#user-info').length) { 
     var userModel = new UserModel(); 
     pager.extendWithPage(userModel); 
     ko.applyBindings(userModel); 
     // Load initial data via ajax 
     userModel.load(); 
     pager.Href.hash = '#!/'; 
     pager.startHashChange(); 
    } 
    $('.dropdown-toggle').dropdown(); 
}); 

這裏而來的HTML與pagerjs數據綁定：

<div class="container"> 

    <div data-bind="page: {id: 'start'}"> 
     Startpage 
    </div> 

    <div data-bind="page: {id: 'user', params: ['uid']}"> 
     User page 
    </div> 

</div> 

Answer 1

我已經通過改變PagerJS使用天真的歷史管理器而不是jQuery的hashchange工作。換句話說這一行：

pager.startHashChange(); 

改爲：即使在http://pagerjs.com的文檔指出

pager.start(); 

由於魔它也適用於IE7不會。那麼，對我來說它確實工作

// 1. iff using naïve hashchange - wont work with IE7 
pager.start(); 

Answer 2

我想我得到了它。

你需要你的最後this.get後添加

this.get(/.*/, function() { 
    console.log("this is a catch-all"); 
}); 

。然後Sammy不停止這個事件。

Answer 3

只要你包含hashchange插件pager.start（）將使用它。

與初級版本相同，但需要先包含jQuery hashchange插件。

http://pagerjs.com/demo/#!/navigation/setup