Solved. The attribute name should be changed to
attr-for-selected
in the neon-animated-pages tag in order to use the data-route attribute of
the elements and not the index.
Em quinta-feira, 3 de dezembro de 2015 17:08:04 UTC-2, Bernardo Doré
escreveu:
>
> Hello everyone,
>
> I do not have enough reputation to post in stack overflow because I am a
> new user there. I joined slack but it seems more focused on quick
> questions. So, I come for help in this list. I am new to Polymer.
>
> My point in making this connection of neon-animated-pages with routing is
> to enable the proper functionality of the "back" button in the browser. I
> am developing a responsive app so I don't want to compromise usability for
> tablets and desktops. I will implement a "back" button in my app for users
> on smartphones.
>
> I am experiencing some difficulty in tying up a neon-animated-pages with
> custom elements and the page.js router. I followed the instructions on the
> videos on youtube by Rob Dodson but my app is slightly different.
>
> Here is my index.html
>
> /*some more importing above these*/
> <link rel="import" href="elements/list-page/list-page.html">
> <link rel="import" href="elements/settings-page/settings-page.html">
>
> <body class="fullbleed layout vertical" unresolved>
>
> <template is="dom-bind" id="app">
> <neon-animated-pages class="flex" selected="{{route}}"
> value-attrib="data-route">
> <list-page data-route="home"></list-page>
> <settings-page data-route="settings"></settings-page>
> </neon-animated-pages>
> </template>
>
> <script src="bower_components/page-js/page.js"></script>
> <script src="app.js"></script>
> </body>
>
>
> app.js
>
> var app = document.querySelector('#app');
> app.route = 'home';
>
> //Define routers
> page('/', home);
> page('/settings', settings);
>
> //Configure
> page({ hashbang: true });
>
> function home(){
> app.route = 'home';
> }
> function settings(){
> app.route = 'settings';
> }
>
>
> This is very much like the examples from the Youtube videos. Here's what I
> have experienced:
>
> - In app.js, If I change app.route to 0 or 1 the correspondent page loads
> but I can't make it work through the address bar.
> - In index.html, the "data-route" attribute does not seem to be able to
> connect to the "selected" attribute.
> - I am a begginer so the data binding concept is still something I am
> learning. I tried changing the template to auto-binding,
> neon-animated-pages stops working.
> - Right now my address bar says "
> http://localhost/basic-animation/#!/basic-animation/"; being
> basic-animation my root directory.
>
> I appreciate your attention and help on this matter, sorry for the long
> email. It was the most suitable channel I could find to look for help.
>
> Thank you,
>
> Bernardo Doré
>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/b0f0fd65-4381-4319-b7bd-4ff92a5aff3d%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
