Маршруты 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(); 

было изменено на:

pager.start(); 

В магии он также работает в IE7, даже если документы на http://pagerjs.com заявляет, что это не так. Ну, для меня это действительно работает

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

Answer 2

Я думаю, что я получил его.

Вам нужно добавить

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

после последнего this.get. Тогда Сэмми не останавливает это событие.

Answer 3

Пока вы включите hashchange плагин pager.start() будет использовать его.

Это то же самое, что и наивное, но сначала нужно включить плагин jQuery hashchange.

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