Menu
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_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 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?
214
You'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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
