All geek questions in one place

View tabbed switcher in Polymer 1.0

I want to change the view in Polymer when I click on a specific tab. For this, I thought about using paper tabs and iron pages, as described in the paper-tabs documentation.

This is the HTML I have to understand:

<html> <head> <title>Test</title> <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="bower_components/polymer/polymer.html"> <link rel="import" href="bower_components/paper-tabs/paper-tabs.html"> <link rel="import" href="bower_components/iron-pages/iron-pages.html"> </head> <body> <paper-tabs selected="{{selected}}"> <paper-tab>Tab 1</paper-tab> <paper-tab>Tab 2</paper-tab> <paper-tab>Tab 3</paper-tab> </paper-tabs> {{selected}} <iron-pages selected="{{selected}}"> <div>Page 1</div> <div>Page 2</div> <div>Page 3</div> </iron-pages> </body> </html>

Changing the tabs seems to work. But it seems that the selected variable is not set correctly, because the Iron Pages element does not change appearance. How can I achieve the required data binding in Polymer 1.0? Do I need to create a custom container element around two elements to provide them with an area in which both can access such a variable?

+6
source share
2 answers

You will need to embed the elements in the template[is="dom-bind"] element if you want the curly braces to work. In this way

 <template is="dom-bind" id="scope"> <span>{{number}}</span> </template> ... <script> window.addEventListener('WebComponentsReady', function() { //You have to make sure that all custom elements are loaded var scope = document.querySelector("template#scope"); scope.number = 1; // display the number 1 }); </script>
+9
source

I also ran into this problem. found a fix that worked for me here:

https://github.com/PolymerElements/iron-pages/issues/3

try the following:

var p = document.querySelector ("iron pages"); p._removeListener (p.activateEvent);

-1
source

Source: https://habr.com/ru/post/988245/

More articles:


All Articles