Neon-animated-pages, custom elements and routing

202 views

Skip to first unread message

Bernardo Doré

unread,

Dec 3, 2015, 2:08:04 PM12/3/15

to Polymer

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é

unread,

Dec 7, 2015, 2:34:14 PM12/7/15

to Polymer

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.

Reply all

Reply to author

Forward

0 new messages