CODEWITHSUNDEEP
polymer
SyrupandSass
SyrupandSass

Reputation: 345

Polymer App Routing not picking up variables

I'm trying to pass variables in my urls using App Location and App Routing in Polymer, but the subroute doesn't seem to be picking up the variables. Can anyone help me figure out what I'm doing wrong?

Code:

<app-location route="{{route}}"></app-location>
 <app-route
   route="{{route}}"
   pattern="/desk/:project/:scene"
   data="{{data}}"
   tail="{{subroute}}">
 </app-route>

The route.path is showing up as /variable/variable, but the project and scene are blank.

Any help would be appreciated.

Upvotes: 0

Views: 75

Answers (2)

JoelCode
JoelCode

Reputation: 336

The code below use two elements to monitor the complete URL.
The first will bind to the project value and output a {{subroute}} for the second element.

<app-location route="{{route}}"></app-location>
 <app-route
   route="{{route}}"
   pattern="/desk/:project"
   data="{{data}}"
   tail="{{subroute}}">
 </app-route>

The second will bind to the scene value.

  <app-route
   route="{{subroute}}"
   pattern=":scene"
   data="{{data}}">
 </app-route>

Upvotes: 1

tony19
tony19

Reputation: 138336

The values of project and scene are read from data, which is bound to <app-route>.data (as in data.project and data.scene).

So, if your URL were http://localhost:8080/desk/123/456, your data object would contain:

{
  project: '123',
  scene: '456'
}

codepen

Upvotes: 0

Related Questions