Switch View with Tabs in Polymer 1.0

7
votes

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?

2
javascripthtmlscopepolymer

2 Answers

9
votes

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>
-1
votes

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

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

try this:

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