0

I am using Polymer and trying to get the app-router setup. I cannot get the app to direct the user to the landing page.

I have tested all of the other pieces individually, so I know that my pages will render. 

<dom-module id="app-body">
    <template>
        <app-location route="{{route}}" use-hash-as-path></app-location>
        <app-route route="{{route}}" pattern="/:page" data="{{data}}"></app-route>

        <iron-pages id="content-pages" selected="{{data.page}}" attr-for-selected="name">
          <landing-page name="landing"></landing-page>
          <lobby-page name="lobby"></lobby-page>
        </iron-pages>

</template>

    <script>
        window.addEventListener('WebComponentsReady', function() {
            Polymer({
                is: 'app-body',
                properties: {
                    data: {
                        type: Object,
                        value: function() {
                              return {
                                page: '/landing'
                              };
                            notify: true
                        }   
                    }
                },

                observers: [
                  '_onRoutePathChanged(route.path)'
                ],

                _onRoutePathChanged: function(path) {
                  // If we do not have an initial URL, we redirect to /landing
                  if (!path) {
                    this.set('route.path', '/landing/');
                  }
                }
            });
        });
    </script>
</dom-module>
David Price
  • 170
  • 1
  • 16

1 Answers1

1

Firstly, you appear to have the same misconception I had, that to make properties transfer downwards you need notify true. That is not so, you only need notify true to export from your element to a parent element that uses it. In your case that is not needed.

What might be happening is that routeData gets set to {page: '/landing'} during your element initialization. At that point the route is not active so routeData is not mapped back to the route.path and fed back through app-location to the url. When it does eventually map back through, there is no change to routeData so the observer doesn't fire to tell you it has changed.

akc42
  • 4,893
  • 5
  • 41
  • 60
  • You were right. I had to use the "attached" event which is part of the polymer element life cycle. This event happens "after the element is attached to the document" I'd like to give you answer because you tipped me off to the issue, but a lot of your post is unrelated. if you could do something to clarify what I said about I'll give you the answer. – David Price Sep 29 '16 at 17:57
  • I hope I understand what you were saying and have removed all the relevant stuff.. – akc42 Sep 30 '16 at 08:34