polymer 1.0 route not rendering

Question

I am trying to get a route to work on a project that has been created using the polymer starter kit .Other routes work but I have been having issues with a nested route that I have been trying to implement

I want to be able to add a route /boat/add and point it to it's respective element. I started out by adding the following code to the routing.html file which is running the page.js router.

page('/boat/add', function() {
        app.route = 'boat-add';
        setFocus(app.route);
    });

This ofcourse is inside the WebComponentsReady event listener.

Next, I have imported the element into the main index.html file under the template tag

<!-- Main Content -->
        <div class="content">
            <iron-pages attr-for-selected="data-route" selected="{{route}}">                
                <section data-route="boat/add" tabindex="-1">
                    <bw-boat-add></bw-boat-add>
                </section>                  
            </iron-pages>
        </div>
    </paper-scroll-header-panel>
</paper-drawer-panel>
</template>

and here is the actual template file

<dom-module is="bw-boat-add">
  <template>
        Test
  </template>
  <script>
        (function() {
          "use strict";

           Polymer({
                is: 'bw-boat-add',
                attached: function() {
                  console.log(1);
                }
           });

        })();
  </script>
</dom-module>

Also, if it is worth it, the attached method handler function returns a 1 in the console. Is there something else I am missing.

Answer 1

In your iron-pages you set data-route to boat/add instead of boat-add. You probably need to change this to:

<section data-route="boat-add" tabindex="-1">
    <bw-boat-add></bw-boat-add>
</section>