1

我开始使用 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 代码。

在更新路由时,例如从#!/to #!/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>
4

3 回答 3

0

我想我明白了。

您需要添加

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

在你最后一次之后this.get。然后 Sammy 并没有停止活动。

于 2013-02-13T21:19:02.443 回答
0

我通过将 PagerJS 更改为使用天真的历史管理器而不是 jQuery hashchange 来实现它。换句话说,这一行:

pager.startHashChange();

改为:

pager.start();

神奇的是,即使http://pagerjs.com上的文档声明它不支持,它也可以在 IE7 中使用。好吧,对我来说它确实有效

// 1. iff using naïve hashchange - wont work with IE7
pager.start();
于 2013-02-14T10:35:10.580 回答
0

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

和naïve一样,但是需要先包含jQuery hashchange插件。

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

于 2013-03-31T01:00:47.990 回答