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/a6492c52-3d20-484c-853f-17392611c5f7%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
