萨米路由不工作答案

【问题标题】：Sammy routing not working萨米路由不工作
【发布时间】：2013-04-16 15:15:07
【问题描述】：

我无法让 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/ 并按

...什么也没发生，即我没有看到第二条路线的消息。

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

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

【问题讨论】：

标签： routing sammy.js

【解决方案1】：

每个 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.

【讨论】：