Sammyjs和pagerjs路由

Question

我开始使用KnockoutJS (2.2.1)，SammyJS (0.7.4)和PagerJS (来自github的最新版本，带有jquery hashchange)来创建一个单页面应用程序，但我遇到了一个路由问题，因为它们在Chrome24.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>

Answer 1

我将PagerJS改为使用朴素的历史管理器，而不是jQuery散列更改，从而使其正常工作。换句话说，这一行：

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之后。那么Sammy就不会停止这个事件。

Answer 3

只要包含hashchange插件，pager.start()就会使用它。

与na是一样的，但是您需要首先包含jQuery hashchange插件。

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