1

i am new to polymer and i just start it with Polymer 1.0 starter-kit

i understand the structure of Polymer app and used the page.js for making a new rout like this.

window.addEventListener('WebComponentsReady', function() {

    // We use Page.js for routing. This is a Micro
    // client-side router inspired by the Express router
    // More info: https://visionmedia.github.io/page.js/
    page('/', function () {
      app.route = 'home';
    });

    page('/users', function () {
      app.route = 'artworks';
    });

//my new routing def. <<<<<<<<
    page('/artworks', function () {
      app.route = 'artworks';
    });

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

    page('/contact', function () {
      app.route = 'contact';
    });

    // add #! before urls
    page({
      hashbang: true
    });

  });

as i understood the page.js sets the app.route to some values and the Polymer iron-pages uses the app.route to select the right section to show with selected="{{route}}" the code is like this:

<iron-pages attr-for-selected="data-route" selected="{{route}}">
  <section data-route="home">home section</section>
  <section data-route="users">users section</section>
  <section data-route="artworks">artworks section</section>
  <section data-route="user-info">user-info section</section>
  <section data-route="contact">contact section</section>
</iron-pages>

after all what is the problem!? well when i use localhost:8000/artworks the page.js wont change it to localhost:8000/#!/artworks but it do just the same for every other routed address like localhost:8000/users or localhost:8000/contact as a result the web browser will search for the file at localhost:8000/artworks folder and finds nothing so a 404 err will occur.

i can not understand now. what did i missed here? any idea?

Babakslt
  • 199
  • 1
  • 10

3 Answers3

2

i don't know exactly why but it seems that the Polymer were not reading the routing file at all! so i just copy-pasted the routing code in my app.js file and everything works normal now!

so now my app.js has all the routing codes at the end and i also attached the page.js in the head of my index.html(the main file of Polymer app)

i have no idea why, but it's working now.

Babakslt
  • 199
  • 1
  • 10
  • Could you post a copy of your app.js file? I am also having this issue and want to try to format mine the same to see if it fixes this. – Bonk Jun 25 '15 at 20:03
  • sure, why not. here it is but we are in comments so i just copy it in a editor for u. obviously it will not do anything all by it self but in Polymer app it will work just fine. https://jsfiddle.net/8er8k8ok/ – Babakslt Jun 26 '15 at 10:06
0

Not sure if this would work, but maybe using relative addresses based on your port might help. For example try something like app.route = window.location.protocol + '//' + window.location.hostname + ":8000" + window.location.pathname + "home";

CookieMonster
  • 216
  • 3
  • 13
  • thank you for ur response but no. it's not working and please correct me if im wrong but i believe app.route is just a variable in app object which polymer binds it to iron-pages selected attribute so the iron-page element will show the right section. so it's not a url. right? – Babakslt Jun 25 '15 at 12:40
  • and now that i changed the code in elements/routhing.html it seems that the change had no effect on the app at all! i did event restart the server (python simplehttpserver) but nothing changed! can this be to problem? :/ – Babakslt Jun 25 '15 at 12:41
  • could this help with your case? http://stackoverflow.com/questions/29091263/polymer-web-components-app-router-cannot-get-route – CookieMonster Jun 25 '15 at 12:53
0

I had the same problem, and it appears to be a problem of cache ; the routing.html page was cached by navigator, so new routes were not seen. Clearing the cache resolved my problem. Hope this helps !

wyllyjon
  • 505
  • 1
  • 5
  • 20