使用聚合物將紙張標簽綁定到核心頁面

Question

我正在使用Polymer構建一個使用紙質標簽和核心頁面的網站。 我遇到的問題是，我似乎無法讓標簽的click事件影響正在顯示的頁面，並且所有內容都保持隱藏狀態，除非我專門選擇我想要顯示的頁面。
所以我真的只是想讓標簽表現出標簽應該表現的方式。

到目前為止，這是我的代碼：

<body unresolved>

  <paper-tabs selected="0" selectedindex="0"  id="paper-tabs"  >

    <paper-tab id="paper-tab" active>ABOUT</paper-tab>
    <paper-tab id="paper-tab1">PORTFOLIO</paper-tab>
    <paper-tab id="paper-tab2">CONTACT</paper-tab>

  </paper-tabs>



  <core-pages selected="{{$.paper-tab.selected}} " selectedindex="0" notap  id="core-pages">
    <about-me id="paper-tab" active>
      <h2 horizontal center-justified>Worldwide Jamie</h2>
      <p>Jamie is a Chicago-based freelance front end web developer.</p>
      <p>Clearly this website is <b>Under Development</b></p>
      <p>Come back soon to see how great your site could be</p>
    </about-me>

    <portfolio-list id="portfolio">
    <!--Insert slider?-->
    </portfolio-list>

    <contact-me id="contact">
    </contact-me>
  </core-pages>    

    </body>
</html>

提前感謝您的任何時間和考慮。

Answer 1

從Polymer 1.0+開始，這就是你想要使用的東西。

<link rel="import" href="components/paper-tabs/paper-tabs.html">
<link rel="import" href="components/iron-pages/iron-pages.html">

<paper-tabs selected="0">
    <paper-tab>Tab One</paper-tab>
    <paper-tab>Tab Two</paper-tab>
</paper-tabs>

<iron-pages selected="0">
    <div>Page One</div>
    <div>Page Two</div>
</iron-pages>

<script>
     var pages = document.querySelector('iron-pages');
     var tabs = document.querySelector('paper-tabs');

    tabs.addEventListener('iron-select', function() { 
        pages.selected = tabs.selected;
    });
</script>

Answer 2

簡單。 在腳本中使用它。

var tabs = document.querySelector('paper-tabs');
var pages = document.querySelector('core-pages');

tabs.addEventListener('core-select',function(){
  pages.selected = tabs.selected;
});

Answer 3

演示 - Codepen。

<polymer-element name="my-element">
  <template>
    <style>
    /* some css */
    </style>

    <section layout vertical is="auto-binding">
      <paper-tabs selected="{{ selected }}" selectedindex="0" horizontal center layout>
        <paper-tab inline flex center-center horizontal layout active>First</paper-tab>
        <paper-tab inline flex center-center horizontal layout>Second</paper-tab>
        ...
      </paper-tabs>
      <core-animated-pages selected="{{ selected }}" selectedindex="0" notap>
        <section active one flex vertical layout>
            <--some html-->
        </section>
        <section one flex horizontal layout>
          <--some html-->
        </section>
        ...
      </core-animated-pages>
    </section>
  </template>

  <script>
    Polymer({
      selected: 0
    });
  </script>
</polymer-element>

<my-element></my-element>

Answer 4

未評估<core-pages>上的綁定，因為僅為<polymer-element>模板內的定義設置了數據綁定。

Polymer有一個特殊的“自動綁定”模板，可以放在主頁面中，為頂級元素提供數據綁定。

更多信息： http ： //www.polymer-project.org/docs/polymer/databinding-advanced.html#bindingoutside

Answer 5

您的核心頁面“選定”屬性表達式中存在拼寫錯誤： 紙張標簽而不是紙張標簽
這個表達式背后有一個尾隨空格
您不能使用paper-tabs作為屬性名稱。 將paper-tabs id重命名為paperTabs （順便說一下，有沒有辦法在表達格式錯誤的情況下使Polymer打印出錯誤消息？）
正如@dfreedm所說，你不能在聚合物元素之外使用數據綁定。 另一個選擇是：將整個應用程序放入聚合物元素中。

Answer 6

<template is="auto-binding">

   ...

  <paper-tabs selected="{{selected}}" selectedIndex="0"  id="paper-tabs"  >

   ...

  <core-pages selected="{{selected}}" notap  id="core-pages">

   ...

</template>

並且，為了添加其他答案中提到的其他一些東西 - 我認為paper-tab元素不應該具有active屬性

使用聚合物將紙張標簽綁定到核心頁面

問題描述

6 個解決方案

解決方案1
14 已采納 2015-10-21 18:37:52

解決方案2
8 2014-07-23 21:26:42

解決方案3
6 2014-12-07 02:16:39

解決方案4
3 2014-07-11 06:25:12

解決方案5
3 2014-07-11 09:27:54

解決方案6
1 2014-11-03 20:37:05

使用聚合物將紙張標簽綁定到核心頁面

問題描述

6 個解決方案

解決方案1 14 已采納 2015-10-21 18:37:52

解決方案2 8 2014-07-23 21:26:42

解決方案3 6 2014-12-07 02:16:39

解決方案4 3 2014-07-11 06:25:12

解決方案5 3 2014-07-11 09:27:54

解決方案6 1 2014-11-03 20:37:05

解決方案1
14 已采納 2015-10-21 18:37:52

解決方案2
8 2014-07-23 21:26:42

解決方案3
6 2014-12-07 02:16:39

解決方案4
3 2014-07-11 06:25:12

解決方案5
3 2014-07-11 09:27:54

解決方案6
1 2014-11-03 20:37:05