Polymer and page.js wildcards in routes

Question

Am using the polymer starting kit and am trying to access routes to users that does not necessary have a link to it on the page.

routing.html:

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

On the page i have:

<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>

It is matching the 4 users with the specified urls correct, but i want the route to match any name even tho there is no link to the page.

It will work with the route '/users/*' that will match everything, but i do not want to use that if i dont have to.

Answer 1

That route you have there will achieve what you want. The way page.js uses the : character is as an identifier that what follows after this should be treated as a parameter. Lets say we have the following route:

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

With that we can match the following urls:

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

The :name part of the route can be whatever we want and it will be matched. To know what the :name part is on your polymer code you need to get it from the function that we specified when we defined the route. The data parameter that is passed on the function contains that info.

On the route we have defined here, we can access the :name parameter with data.params.name inside the route definition.

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

Best way to let the elements that want the data to know what it is. Is to set your :name parameter to a variable on your app object.

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

That code sets the whole parameter data to a variable on your app object. In this case we want to access the :name parameter. The way we go about it is to pass the app.params object to the element that needs that data and access the :name parameter with params.name , that assumes that you have named the element property in whic you use it params .

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

Expecting that element to be child element of the <template is="dom-bind" id="app"> element.

With that in mind we can go to any route that matches the route so /users/anything and if you have set up your user page properly you will see the info for the user in this case info for anything user.

You can read more about routing with page.js here: Visionmedia Page.js

---

To solve the issue from coming from outside the current site use following code.

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

It isn't the most elegant thing but will solve the issue. It will cause ugly urls that have two slashes.

---

Better way to solve the second problem. Don't us the hashbangs: true option set it false . Instead set the base url to this: page.base('/#'); That solves the problem and removes the annoiyng ! from the url. :)