Skip to first unread message
Victor Wainer
Mar 16, 2016, 1:37:59 PM3/16/16
to Polymer
We are going nuts here trying to solve a problem that in principle seems
to be pretty basic... we have been weeks at it, and we don't know what
else to try, so... maybe someone here can help?
We have created the same site in two different versions, and both approaches have hit different (to us) insurmountable obstacles...
On one version we have created a template (let's call it mytemplate) composed of two sets iron-pages and paper-tabs that are nested.
We use the properties id="pages" selected="0", id="tabs" selected="0", id="nested-pages" selected="0" and id="nested-tabs" selected="0" and bind them with this script:
<script>
var tabs = document.querySelector("#tabs"
We have created the same site in two different versions, and both approaches have hit different (to us) insurmountable obstacles...
On one version we have created a template (let's call it mytemplate) composed of two sets iron-pages and paper-tabs that are nested.
We use the properties id="pages" selected="0", id="tabs" selected="0", id="nested-pages" selected="0" and id="nested-tabs" selected="0" and bind them with this script:
<script>
var tabs = document.querySelector("#tabs"
);
var pages = document.querySelector("#pages");
tabs.addEventListener("click", function (e) {
pages.selected = tabs.selected;
});
var nestedTabs = document.querySelector("#nested-tabs");
var nestedPages = document.querySelector("#nested-pages");
nestedTabs.addEventListener("click", function (e) {
nestedPages.selected = nestedTabs.selected;
});
</script>
This version works well when the whole code is in one page. But it fails in Firefox (and Safari, etc...) if we try to use it as a custom element, and we call the template from another page, like this:
<body unresolved>
<mytemplate></mytemplate>
</body>
It does work well in Chrome.
----
The other example does not use the script to bind the iron-pages and paper-tabs, but goes about it nesting one template inside the other and using selected="{{selected}}" instead on selected="0".
It works, as far as functionality goes. No problems - except... when you open the page the default iron-page is empty. If you then click on any tab and navigate around the site, you can view the content of all page, including the initial one - but we cannot seem to get that first page to show inside the tab on page loading....
var pages = document.querySelector("#pages");
tabs.addEventListener("click", function (e) {
pages.selected = tabs.selected;
});
var nestedTabs = document.querySelector("#nested-tabs");
var nestedPages = document.querySelector("#nested-pages");
nestedTabs.addEventListener("click", function (e) {
nestedPages.selected = nestedTabs.selected;
});
</script>
This version works well when the whole code is in one page. But it fails in Firefox (and Safari, etc...) if we try to use it as a custom element, and we call the template from another page, like this:
<body unresolved>
<mytemplate></mytemplate>
</body>
It does work well in Chrome.
----
The other example does not use the script to bind the iron-pages and paper-tabs, but goes about it nesting one template inside the other and using selected="{{selected}}" instead on selected="0".
It works, as far as functionality goes. No problems - except... when you open the page the default iron-page is empty. If you then click on any tab and navigate around the site, you can view the content of all page, including the initial one - but we cannot seem to get that first page to show inside the tab on page loading....
Eric Bidelman
Mar 16, 2016, 2:37:39 PM3/16/16
to Victor Wainer, Polymer
Data binding is definitely the way to go for something like this.
Are you setting an initial value for the `selected` property?
in properties:
selected: {
type: Number,
value: 0
}
In code:
elementOrTemplate.selected = 0;
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 polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/b8f204ea-dde3-462f-a32d-74cadd1c150a%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages