Cambia visualizzazione con schede in Polimero 1.0

Voglio cambiare la visualizzazione in Polimero quando faccio clic su una determinata scheda. Per questo ho pensato di usare le schede di carta e le pagine di ferro come descritto nello paper-tabs documentation.Cambia visualizzazione con schede in Polimero 1.0

Questo è HTML che devo realizzare questo:

<html> 
 

 
<head> 
 
    <title>Test</title> 
 
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> 
 
    <link rel="import" href="bower_components/polymer/polymer.html"> 
 
    <link rel="import" href="bower_components/paper-tabs/paper-tabs.html"> 
 
    <link rel="import" href="bower_components/iron-pages/iron-pages.html"> 
 
</head> 
 

 
<body> 
 

 
    <paper-tabs selected="{{selected}}"> 
 
    <paper-tab>Tab 1</paper-tab> 
 
    <paper-tab>Tab 2</paper-tab> 
 
    <paper-tab>Tab 3</paper-tab> 
 
    </paper-tabs> 
 

 
    {{selected}} 
 

 
    <iron-pages selected="{{selected}}"> 
 
    <div>Page 1</div> 
 
    <div>Page 2</div> 
 
    <div>Page 3</div> 
 
    </iron-pages> 
 
    
 
</body> 
 
</html>

Modifica della Tabs sembra funzionare. Ma sembra che la variabile selezionata non venga impostata correttamente perché l'elemento iron-pages non cambia la vista. Come posso ottenere l'associazione dati necessaria in Polymer 1.0? Devo creare un contenitore personalizzato Elemento attorno ai due elementi per dare loro un ambito in cui entrambi potrebbero accedere a tale variabile?

fonte

2015-05-30 b-m-f

È necessario incorporare gli elementi in un elemento template[is="dom-bind"] se si desidera che le parentesi graffe funzionino. Mi piace così

<template is="dom-bind" id="scope"> 
    <span>{{number}}</span> 
</template> 
... 
<script> 
    window.addEventListener('WebComponentsReady', function() { //You have to make sure that all custom elements are loaded 
    var scope = document.querySelector("template#scope"); 
    scope.number = 1; // display the number 1 
    }); 
</script>

fonte

2015-05-31 11:43:49

Grazie mille. Leggendo la documentazione del polimero ho trovato "is = 'auto-binding'". Questo è da 0,5. È lo stesso di "is = 'dom-bind'" in 1.0? –

È lo stesso. –

-1

Ho anche incontrato questo problema. trovato una soluzione che ha funzionato per me qui:

https://github.com/PolymerElements/iron-pages/issues/3

provare questo:

var p = document.querySelector ('ferro-pagine'); p._removeListener (p.activateEvent);

fonte

2015-06-01 22:22:05 devDesign

È sporco, utilizzando un metodo API interno. –

Cambia visualizzazione con schede in Polimero 1.0

risposta

Problemi correlati