2017-01-04 10 views
0

KnockoutJS SPA tutorialの例に触発されて、Sammy.jsを使用して、単一ページアプリケーションでいくつかの簡単な動作を呼び出そうとしています。URLハッシュを使用して、呼び出されているAPIエンドポイントを追跡します。私はこのようになりますページ履歴で終わるしようとしている:すべてのケースでSammyJSは、通常のハッシュと同じスラッシュを含むハッシュを処理しないのはなぜですか?

、 URLフラグメントは実際にはAPI呼び出しを行うために使用された生のURLです現在のページをレンダリングしました。

問題は、ロケーションハッシュにスラッシュ文字が含まれていると、Sammyのルート処理が正しく機能しないことがあります。理由はわかりません。 RFC3986によれば、 "スラッシュ("/")と疑問符("? ")はフラグメント識別子内のデータを表すことができるので、エスケープされていないスラッシュと疑問符URLフラグメント内の文字。

いくつかのシナリオを網羅した完全な復習ケースです。 2つのSammyルートが定義されています。構文の理解が正しい場合は、ハッシュを含むものをすべて捕捉し、もう1つは空のルートと一致する必要があります。しかし、それは起こっていることではありません。

<!DOCTYPE html> 
<html> 
<head> 
    <title>SammyJS routing demo</title> 
    <script type="text/javascript" src="Scripts/jquery-3.1.1.min.js"></script> 
    <script type="text/javascript" src="Scripts/sammy-0.7.5.min.js"></script> 
</head> 
<body> 
    <ul> 
     <li><a href="#foo">#foo</a> - prints 'foo'</li> 
     <li><a href="#/bar">#/bar</a> - prints 'NOPE'</li> 
     <li><a href="#!/baz">#!/baz</a> - prints 'NOPE'</li> 
     <li><a href="#foo/bar">#foo/bar</a> - prints 'NOPE'</li> 
     <li><a href="#foo/bar#bop">#foo/bar#bop</a> - prints 'bop'</li> 
     <li><a href="#why?not">#why?not</a> - prints 'why'</li> 
     <li><a href="#why?not#zoidberg">#why?not#zoidberg</a> - prints 'why?not#zoidberg'</li> 
     <li><a href="#why?not#zoidberg/">#why?not#zoidberg/</a> - prints 'NOPE'</li> 
    </ul> 
    <script type="text/javascript"> 
     Sammy(function() { 
      this.get('#:url', function() { console.log(this.params.url); }); 
      this.get('', function() { console.log('NOPE'); }); 
     }).run(); 
    </script> 
</body> 
</html> 

サミーがこれらの断片を一貫して扱うために必要なことは何ですか?

答えて

2

だから、http://sammyjs.org/docs/routesに記載されているSammy.jsは、「/ 'が含まれている文字列と一致させたい場合は動作しません」と言いたいのですが、Regexpと' splat '失敗する。

ただし、最初のthis.getthis.get('#(.*)', function() { console.log(this.params['splat']); });に置き換えた場合、それはかなりうまく機能します(「#why?not」は不足していますが、それはおそらくクエリ文字列と「#why?not#zoidberg "それは幸せではありませんが、私はあなたがURLの単一の#に固執すべきだと言っています)

https://jsfiddle.net/gymt828r/これの固定インスタンスを示しています。

1

URL内のSammyパラメータにはスラッシュ文字を使用できないという問題があります。もしそうなら、あなたは "#/ path /:var1/other /:var2"のようなURLを持つことができませんでした。代わりに、あなたは(詳細はhttp://sammyjs.org/docs/routesを参照してください)あなたのパスに一致するたびに、以下の例のように、正規表現を使用することをお勧めします:

this.get(/\#(.*)/, function() { 
    console.log(this.params['splat']); 
}); 

上記の意志の出力以下のパスのそれぞれについてURL:

残念ながら、「?」の後ろにある項目を取得することはできません。しかし、これを使用して文字。これらは "this.params"に別々に解析されます。したがって、次のURLは「this.params.page」を適切な値に設定されています:

残念ながら、あなたが複数のハッシュを持ってすることはできませんURLとSammyは、ハッシュの最後のインスタンスから始まるURLの部分だけを見て、 "#why?not#zoidberg"が機能する理由を説明します。

関連する問題