javascript polymer tabs not binding to pages using is="auto-binding"

Question

I'm trying to get paper-tabs to bind to core-pages on my page using instead of putting everything inside a polymer element. However, the binding isn't working. Does anyone know what I'm doing wrong?

Here's my code:

<!doctype html>
<html>

<head>

    <title>Breakout</title>

    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

    <script src="../bower_components/webcomponentsjs/webcomponents.js">
    </script>

    <link rel="import" href="../bower_components/core-header-panel/core-header-panel.html">
    <link rel="import" href="../bower_components/core-toolbar/core-toolbar.html">
    <link rel="import" href="../bower_components/paper-tabs/paper-tabs.html">
    <link rel="import" href="../bower_components/core-pages/core-pages.html">

    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            background-color: #E5E5E5;
            font-family: 'Helvetica', Arial, sans-serif;
        }

        core-header-panel {
            height: 100%;
            /* overflow: auto; */
            -webkit-overflow-scrolling: touch;
        }

        core-toolbar {
            background: #03a9f4;
            color: white;
        }

        paper-tab {
            max-width: 200px;
        }

        #tabs {
            margin: 0;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            text-transform: uppercase;
        }
    </style>

</head>

<body fullbleed unresolved>

  <template id="auto-bind-demo" is="auto-binding">
    <core-header-panel>
        <core-toolbar>
            <div id="test" style="padding-bottom: 13px" self-end>Breakout Cave Survey visualizer</div>
            <paper-tabs id="tabs" selected="{{selected}}" selectedindex="0" flex self-end>
                <paper-tab name="caves">Caves</paper-tab>
                <paper-tab name="account" style="position: absolute; right: 0px;">Account</paper-tab>
            </paper-tabs>
        </core-toolbar>

        <core-pages transitions="slide-from-right" selected="{{selected}}" selectedindex="0" lastselected="1">
          <section>Caves</section>
          <section>Account Settings</section>
        </core-pages>
    </core-header-panel>
  </template>

</body>
</html>

Andy Andy · Accepted Answer · 2015-01-24T17:59:02

Update:

I got it working by moving all of this code into a polymer-element and publishing the selected attribute in the Polymer() call. So I never figured out how to get auto-binding to work, but I found an alternative. Here's my code, and anyone feel free to tell me if I'm doing anything wrong, since I'm still a beginner at web development:

breakout-main.html

<link rel="import" href="../bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="../bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../bower_components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="../bower_components/core-animated-pages/transitions/slide-from-right.html">

<polymer-element name="breakout-main">
  <template>
    <style>
      core-header-panel {
          height: 100%;
          overflow: auto;
          -webkit-overflow-scrolling: touch;
      }

      core-toolbar {
          background: #03a9f4;
          color: white;
      }

      paper-tab {
          max-width: 200px;
      }

      #tabs {
          margin: 0;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
          text-transform: uppercase;
      }
    </style>

    <core-header-panel>
        <core-toolbar>
            <div id="test" style="padding-bottom: 13px" self-end>Breakout Cave Survey visualizer</div>
            <paper-tabs id="tabs" selected="{{ selected }}" flex self-end>
                <paper-tab name="caves">Caves</paper-tab>
                <paper-tab name="account" style="position: absolute; right: 0px;">Account</paper-tab>
            </paper-tabs>
        </core-toolbar>

        <core-animated-pages transitions="slide-from-right" style="height: 100%;" transitions="slide-from-right" selected="{{ selected }}">
          <section name="caves">Caves</section>
          <section name="account">Account Settings</section>
        </core-animated-pages>
    </core-header-panel>
  </template>

  <script>
    Polymer({
      publish: {
        selected: {
          value: "caves",
          reflect: true
        }
      }
    });
  </script>
</polymer-element>

index.ejs

<!doctype html>
<html>

<head>

    <title>Breakout</title>

    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

    <script src="../bower_components/webcomponentsjs/webcomponents.js">
    </script>

    <link rel="import" href="../bower_components/breakout-main.html">

    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            background-color: #E5E5E5;
            font-family: 'Helvetica', Arial, sans-serif;
        }
    </style>

</head>

<body fullbleed unresolved>

  <breakout-main></breakout-main>

</body>

</html>

javascript polymer tabs not binding to pages using is="auto-binding"

1 Answers