Polymer und page.js Wildcards in den Routen

Question

Ich benutze das Polymer-Start-Kit und versuche, auf Benutzerrouten zuzugreifen, die keinen Link dazu auf der Seite haben müssen.

routing.html:

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

auf der Seite ich habe:

<a href$="{{baseUrl}}users/Addy">Addy</a><br> 
<a href$="{{baseUrl}}users/Rob">Rob</a><br> 
<a href$="{{baseUrl}}users/Chuck">Chuck</a><br> 
<a href$="{{baseUrl}}users/Sam">Sam</a> 

Es ist die 4-Benutzer mit den angegebenen URLs korrekt, passend, aber ich möchte, dass die Route auch einen beliebigen Namen entsprechen Es gibt keinen Link zu der Seite.

Es wird mit der Route '/ users/*' funktionieren, die alles zusammenbringt, aber ich möchte das nicht verwenden, wenn ich nicht muss.

Answer 1

Die Route, die Sie dort haben, wird erreichen, was Sie wollen. Die Art und Weise, wie page.js das :-Zeichen verwendet, dient als Bezeichner dafür, dass das, was danach folgt, als Parameter behandelt werden sollte. Lets sagen, dass wir die folgende Route haben:

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

Damit können wir die folgenden URLs entsprechen:

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

Der :name Teil der Strecke kann alles sein, was wir wollen, und es wird abgestimmt werden. Um zu wissen, was der :name Teil auf Ihrem Polymer-Code ist, müssen Sie es von der Funktion erhalten, die wir bei der Definition der Route angegeben haben. Der Parameter data, der an die Funktion übergeben wird, enthält diese Information.

Auf der Route, die wir hier definiert haben, können wir auf den :name Parameter mit data.params.name innerhalb der Route-Definition zugreifen.

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

Der beste Weg, die Elemente zu lassen, die die Daten wissen wollen, was es ist. Setzen Sie Ihren :name Parameter auf eine Variable auf Ihrem Objekt app.

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

Dieser Code setzt die ganzen Parameterdaten auf eine Variable auf Ihrem app Objekt. In diesem Fall möchten wir auf den Parameter :name zugreifen. Die Vorgehensweise besteht darin, das Objekt app.params an das Element zu übergeben, das diese Daten benötigt, und auf den Parameter :name mit params.name zuzugreifen, bei dem davon ausgegangen wird, dass Sie die Elementeigenschaft benannt haben, in der Sie sie verwenden params.

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

Erwartet, dass Element Kindelement des Elements <template is="dom-bind" id="app"> ist.

In diesem Sinne können wir zu jeder Route gehen, die der Route so /users/anything entspricht und wenn Sie Ihre Benutzerseite richtig eingerichtet haben, sehen Sie die Info für den Benutzer in diesem Fall Info für anything Benutzer.

Sie können mehr lesen über Routing mit page.js hier: Visionmedia Page.js

---

Um das Problem zu lösen von folgendem Code von außerhalb des aktuellen Website Einsatz kommen.

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

Es ist nicht die eleganteste Sache, aber wird das Problem lösen. Es wird hässliche URLs mit zwei Schrägstrichen verursachen.

---

Besserer Weg, um das zweite Problem zu lösen. Nicht die Option hashbangs: truefalse festlegen. Setzen Sie stattdessen die Basis-URL auf diesen Wert: page.base('/#'); Das löst das Problem und entfernt die Meldung ! von der URL. :)