我开始使用 KnockoutJS (2.2.1)、SammyJS (0.7.4) 和 PagerJS 的组合(最新来自 github 和 jquery hashchange)创建一个单页应用程序,我遇到了路由问题,因为它们在 Chrome 版本 24.0.1312.57 m 或 Firefox 16.0 中不起作用(由于某种原因,它实际上在 IE7 中工作) 。
使用 sammyjs,我指定了应用程序应使用react的路由及其相应的操作,例如加载用户数据。 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 数据绑定(bind)的 HTML:
<div class="container">
<div data-bind="page: {id: 'start'}">
Startpage
</div>
<div data-bind="page: {id: 'user', params: ['uid']}">
User page
</div>
</div>
最佳答案
我想我明白了。
您需要添加
this.get(/.*/, function() {
console.log("this is a catch-all");
});
在您最后一次 this.get
之后。然后 Sammy 并没有停止该事件。
关于javascript - Sammyjs 和 pagerjs 路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14839337/