KnockoutJS（2.2.1）、SammyJS（0.7.4）、PagerJS（githubからjquery hashchangeを使用した最新）を組み合わせてシングルページアプリを作成し始めましたが、ルートに問題が発生しました。 Chromeバージョン24.0.1312.57mまたはFirefox16.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();
});
そして、ここにpagerjsデータバインディングを含むHTMLがあります。
<div class="container">
<div data-bind="page: {id: 'start'}">
Startpage
</div>
<div data-bind="page: {id: 'user', params: ['uid']}">
User page
</div>
</div>