Связывающие бумажные вкладыши к основным страницам с полимером

Я создаю сайт с помощью 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>

Заранее благодарим за любое время и внимание.

Ответы

Ответ 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>

Ответ 2

Simple. используйте это в script.

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

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

Ответ 3

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

Ответ 4

Связывание на <core-pages> не оценивается, потому что привязка данных настраивается только для определений внутри шаблона <polymer-element>.

Полимер имеет специальный шаблон автоматической привязки, который предназначен для размещения на главной странице и обеспечивает привязку данных для элементов верхнего уровня.

Дополнительная информация: http://www.polymer-project.org/docs/polymer/databinding-advanced.html#bindingoutside

Ответ 5

  • Там есть опечатка в выбранном выражении атрибута вашей основной страницы: вкладка "бумага" вместо "бумажных" вкладок

  • В этом выражении существует следующее пространство

  • Вы не можете использовать paper-tabs как имя свойства. Переименуйте идентификатор бумажных вкладок в paperTabs (Кстати, есть ли способ заставить Полимер вывести сообщение об ошибке в случае искаженного выражения?)

  • Как сказал @dfreedm, вы не можете использовать привязку данных вне полимерного элемента. Другой вариант: поместите все ваше приложение в полимерный элемент.

Ответ 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