Sammy路由不工作

时间:2013-04-16 15:15:07

标签: routing sammy.js

我无法让sammy.js路由按预期工作。

我有以下JavaScript。

(function ($) {

    var app = $.sammy('#main', function () {

        this.get('#/', function (context) {
            context.log("start page");
        });

        this.get("#/another/:id/", function (context) {
            context.log("another page with id = " + context.params["id"]);        
        });
    });

    $(function (context) {
        app.run('#/');
    });

})(jQuery);

我的理解是,每当URL发生变化时,只要新路由对应于其中一条声明的路由,我就应该在控制台日志中看到相关的消息。

但我没有。

首次加载页面时,我可以看到“开始页面”消息。到目前为止一切都很好。

如果我那么

  • 点击指向[my url] /#/ another / 1 /
  • 的链接
  • 在地址栏中手动输入[my url] /#/ another / 1 /并点击< Enter>

......没有任何反应,我没有看到第二条路线的消息。

但是,使用地址栏中的第二条路线,如果我现在点击F5或点击浏览器的刷新按钮,则页面会重新加载并显示预期的控制台消息。

我是否误解了,或者当超链接或键盘更改了URL哈希时Sammy会注意到,然后相应地采取行动?我需要在脚本中添加其他内容吗?

1 个答案:

答案 0 :(得分:7)

每个sammy应用程序都需要附加到DOM元素。

因此,您可能错过了页面中的#main元素。

因此,您需要在DOM中的某处添加#main元素:

<div id="main">
</div>

或者你需要在没有选择器的情况下初始化sammy

var app = $.sammy(function () {

    this.get('#/', function (context) {
       context.log("start page");
    });

    this.get("#/another/:id/", function (context) {
       context.log("another page with id = " + context.params["id"]);
    });
});

在这种情况下,它将自身附加到body元素。

Live Demo