javascript聚合物标签不使用is="auto-binding"绑定到页面答案

【问题标题】：javascript polymer tabs not binding to pages using is="auto-binding"javascript聚合物标签不使用is="auto-binding"绑定到页面
【发布时间】：2015-01-24 17:13:23
【问题描述】：

我正在尝试将纸张标签绑定到我页面上的核心页面，而不是将所有内容都放在聚合物元素中。但是，绑定不起作用。有谁知道我做错了什么？

这是我的代码：

<!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>

【问题讨论】：

标签： javascript data-binding polymer

【解决方案1】：

更新：

我通过将所有这些代码移动到 polymer-element 和 publish 在 selected 调用中的 selected 属性中使其工作。所以我从来没有想过如何让自动绑定工作，但我找到了一个替代方案。这是我的代码，如果我做错了什么，请随时告诉我，因为我还是 Web 开发的初学者：

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>

【讨论】：