Polymerとpage.jsワイルドカード

Question

ポリマー開始キットを使用していて、ページにリンクが必要ないユーザーのルートにアクセスしようとしています。

routing.html：

page('/users/:name', function(data) { 
    app.route = 'user-info'; 
    app.params = data.params; 
}); 

私が持っているページでは：

​​

それは正しい指定されたURLで4人のユーザーをマッチングされますが、私はルートにも任意の名前を一致させたいですthoページへのリンクはありません。

すべてに一致する '/ users/*'ルートで動作しますが、必要がない場合は使用したくありません。

Answer 1

あなたが持っているルートは、あなたが望むものを達成するでしょう。 page.jsが:文字を使用する方法は、後に続くものがパラメータとして扱われるべきであるという識別子としてのものです。私たちは次のルート考えてみましょう：それと

page('/users/:name', function(data) { 
app.route = 'user-info'; 
app.params = data.params; 
}); 

を、私たちは次のURLを一致させることができます：ルートの

/users/Addy 
/users/Chuck 
/users/somebody 

:name部分は、私たちが望むものは何でもすることができ、それが一致します。 :nameの部分がポリマーコードに含まれていることを確認するには、経路を定義したときに指定した機能から取得する必要があります。関数に渡されるdataパラメータには、その情報が含まれています。

ここで定義した経路では、経路定義の中でというパラメータで:nameパラメータにアクセスできます。

page('/users/:name', function(data){ 
    //We have access to the :name parameter here 
}); 

データを必要とする要素がその内容を知る最も良い方法です。 :nameパラメータをappオブジェクトの変数に設定します。

このコードは、パラメータデータ全体をappオブジェクトの変数に設定します。この場合、:nameパラメータにアクセスします。ここでは、app.paramsオブジェクトをそのデータを必要とする要素に渡し、パラメータ（params.name）にアクセスします。使用する要素プロパティの名前はparamsとします。

<custom-elem params="{{params}}></custom-elem> 

要素が<template is="dom-bind" id="app">要素の子要素であることが必要です。

これを念頭に置いて、経路に一致するすべてのルートに行くことができますので、/users/anythingと入力してください。ユーザーページの設定が正しく行われた場合は、anythingユーザーの情報が表示されます。

あなたはここにpage.jsとルーティングの詳細を読むことができます：Visionmedia Page.js

---

は、次のコード現在のサイトの使用外部からの問題を解決するために。

var users = function(data){ 
    app.route = 'user-info'; 
    app.params = data.params; 
}; 
page('/users/:name', users); 
page('//users/:name', users); 

これは最も優雅なものではありませんが、問題を解決します。それは2つのスラッシュを持つ醜いURLを引き起こします。

---

第2の問題を解決するための改善された方法。 hashbangs: trueオプションをfalseに設定しないでください。代わりにベースURLをこれに設定してください：page.base('/#');これで問題は解決され、URLからannoyiyng !が削除されます。 :)