我开始使用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
和{之间切换时,数据会按预期更新{1}}。但是,当删除sammyjs代码时,它可以工作 - 页面之间的切换有效,但数据当然不能正确更新。
似乎SammyJS终止了pagerjs的进一步执行,但由于我对这些库很陌生,所以很可能是我的代码行为不端。任何见解都很棒。
javascript代码如下所示:
#!/user?uid=321
这里是带有pagerjs数据绑定的HTML:
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();
});
答案 0 :(得分:0)
我想我明白了。
您需要添加
this.get(/.*/, function() {
console.log("this is a catch-all");
});
在您上一次this.get
之后。然后萨米没有停止这件事。
答案 1 :(得分:0)
我通过改变PagerJS来使用天真的历史管理器而不是jQuery hashchange来实现它。换句话说,这一行:
pager.startHashChange();
更改为:
pager.start();
从魔术开始,它也适用于IE7,即使http://pagerjs.com的文档声明它没有。好吧,对我来说它确实有用
// 1. iff using naïve hashchange - wont work with IE7
pager.start();
答案 2 :(得分:0)
只要你包含hashchange插件,pager.start()就会使用它。
与天真相同,但您需要首先包含jQuery hashchange插件。