2014-07-11 7 views
13

Buduję strony z polimeru, który używa papierowej zaczepy i rdzeniowo-stron. Problem biegnę na to, że nie wydaje się uzyskać zdarzenie click dla wypustki wpłynąć strony pokazano i cała zawartość pozostaje ukryty, chyba że wyraźnie zaznaczyć, która strona chcę, pokazane.
Tak naprawdę po prostu klapki zachowywać się tak, karty są podobno zachowywać.Oprawa papierowej karty, aby rdzeń-Stron z polimerem

Oto mój kod do tej pory:

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

Dzięki z góry za wszelkie czas i uwagę.

+0

Wygląda na to, że istnieje wiele odpowiedzi na twoje pytanie. Jeśli Twoje pytanie zostało odebrane, możesz przyjąć jedną z nich jako odpowiedź. Po prostu kliknij znacznik wyboru. –

Odpowiedz

14

Jak Polimerowych 1.0+ , tego właśnie będziesz chciał użyć.

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

utrzymanie 'selected = {{selected}}' na obu kartach, strony wiążą zaznaczenie. Czy możesz zasugerować, jak ustawić domyślną wybraną stronę podczas renderowania na początku –

+1

@sivatumma, zobacz tutaj na przykład: https://github.com/Download/polymer-cdn/blob/master/lib/paper-tabs/demo /tabs-with-content-example.html – Pooven

3

Wiązanie <core-pages> nie jest analizowane, ponieważ powiązanie danych jest skonfigurowane tylko dla definicji wewnątrz szablonu <polymer-element>.

Polimer ma specjalny „auto-binding” szablon, który ma być umieszczony w stronie głównej i zapewnienia wiązania danych dla elementów najwyższego poziomu.

Więcej informacji: http://www.polymer-project.org/docs/polymer/databinding-advanced.html#bindingoutside

+0

Aby wykorzystać powiązanie danych poza , umieść swoje rzeczy wewnątrz automatycznie wiążącego elementu