Hi,
I’m not very familiar with Polymer, hence this question. I’m trying to navigate from a page with list items to a page that shows details of that item but I’m not sure how to do the routing. It should be as part of the on-tap event. Can someone please help or provide some pointers? I would prefer to do this in JavaScript than declaratively (unless that’s a bad practice in Polymer)
Thanks!
Jayesh
Hi Jayesh,
Currently, on screens generated by STUDIO we use data-binding to conditionally switch between list/edit view e.g.
<template is="dom-if" if="[[!editedEntity]]">
...
display list
...
However you can use different approach e.g. app-route component in conjunction with iron-pages see this blog post for more info: Routing with <app-route> - Polymer Project .
We plan to improve routing in the next release, see PL-8707
Thanks, but does it have to be declarative using ? Can I not do it in JavaScript in the on-tap? I don’t need to open an edit screen, just a detailed view of some entity B on page B ( so pass some params ) after tapping on a List Item of entity A on Page A.
Hi Jayesh,
Ok let’s try to take a more in-depth look at the topic.
Usually Polymer applications are single page applications. So basically all transitions between screens is just hiding/displaying (or re-stamping) the corresponding elements.
A common approach is to use an iron-pages element in conjunction with data-binding, consider the following example: https://www.polymer-project.org/1.0/start/toolbox/create-a-page
Also you can bind an iron-pages to the URL using app-location and app-route. Then it will be possible to use regular links to navigate between pages (example).
If you just need to switch between two states it’s possible to show/hide them using dom-if helper. I’ve made a simple example for you:
From the practical point of view - in your CUBA polymer client just rename -edit screen to -view and use it to display data.
Let me know if you have any questions.
See the following issue in our bug tracker: