I want to change the View in Polymer when I click on a certain Tab. For this I thought of using paper-tabs and iron-pages as described in the paper-tabs documentation.
This is HTML that I have to realize this:
<html>
<head>
<title>Test</title>
<script src="bower_ponents/webponentsjs/webponents-lite.min.js"></script>
<link rel="import" href="bower_ponents/polymer/polymer.html">
<link rel="import" href="bower_ponents/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_ponents/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>I want to change the View in Polymer when I click on a certain Tab. For this I thought of using paper-tabs and iron-pages as described in the paper-tabs documentation.
This is HTML that I have to realize this:
<html>
<head>
<title>Test</title>
<script src="bower_ponents/webponentsjs/webponents-lite.min.js"></script>
<link rel="import" href="bower_ponents/polymer/polymer.html">
<link rel="import" href="bower_ponents/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_ponents/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 looks like the selected variable is not getting set correctly because the iron-pages element does not change the view. How can I achieve the needed data-binding in Polymer 1.0? Do I need to create a custom container Element around the two elements to give them a scope where both could access such a variable?
Share Improve this question edited May 31, 2015 at 7:55 b-m-f asked May 30, 2015 at 22:08 b-m-fb-m-f 1,3382 gold badges13 silver badges30 bronze badges2 Answers
Reset to default 9You'll have to embed the elements in a template[is="dom-bind"] element if you want to make the curly brackets work. Like so
<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>
I also ran into this problem. found a fix that worked for me here:
https://github./PolymerElements/iron-pages/issues/3
try this:
var p = document.querySelector('iron-pages'); p._removeListener(p.activateEvent);