5

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 が変更されるたびに、新しいルートが宣言されたルートの 1 つに対応している限り、コンソール ログに関連するメッセージが表示されるはずです。

しかし、私はしません。

ページが最初に読み込まれると、「開始ページ」メッセージが表示されます。ここまでは順調ですね。

私なら

  • [my url]/#/another/1/ へのリンクをクリックします
  • [my url]/#/another/1/ をアドレスバーに手動で入力し、<Enter> を押します。

... 何も起こりません。つまり、2 番目のルートのメッセージが表示されません。

ただし、アドレス バーの 2 番目のルートでは、F5 キーを押すか、ブラウザーの更新ボタンをクリックすると、ページがリロードされ、予想されるコンソール メッセージが表示されます。

それとも、ハイパーリンクやキーボードによって URL ハッシュが変更されたときに Sammy がそれに気付き、それに応じて行動するべきではないのでしょうか? スクリプトに追加する必要があるものは他にありますか?

4

1 に答える 1

7

それぞれのサミー アプリケーションは、DOM 要素にアタッチする必要があります。

したがって#main、ページから要素が欠落している可能性があります。

#mainしたがって、DOM のどこかに要素を追加する必要があります。

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

または、セレクターなしでサミーを初期化する必要があります

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要素にアタッチされます。

ライブデモ。

于 2013-04-30T16:09:39.393 に答える