Switch View mit Tabs in Polymer 1.0

Ich möchte die Ansicht in Polymer ändern, wenn ich auf eine bestimmte Registerkarte klicken. Dafür habe ich gedacht, Papier-Tabs und Eisen-Seiten zu verwenden, wie in der paper-tabs documentation beschrieben.Switch View mit Tabs in Polymer 1.0

Dies ist HTML, die ich habe, dies zu realisieren:

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

Ändern der Tabs zu arbeiten scheint. Es sieht jedoch so aus, als ob die ausgewählte Variable nicht richtig gesetzt wird, da das Element bügel-Seiten die Ansicht nicht ändert. Wie kann ich die erforderliche Datenbindung in Polymer 1.0 erreichen? Muss ich ein benutzerdefiniertes Containerelement um die zwei Elemente erstellen, um ihnen einen Bereich zu geben, in dem beide auf eine solche Variable zugreifen können?

Quelle

2015-05-30 b-m-f

Sie müssen die Elemente in ein template[is="dom-bind"] Element einbetten, wenn Sie die geschweiften Klammern arbeiten möchten. Wie so

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

Quelle

2015-05-31 11:43:49

Vielen Dank. Als ich die Polymerdokumentation las, fand ich "is = 'autobinding'". Dies ist von 0,5. Ist das das gleiche wie "is = 'dom-bind'" in 1.0? –

Es ist das gleiche. –

-1

Ich lief auch in dieses Problem. fand ein Update, das hier für mich gearbeitet:

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

try this:

var p = document.querySelector ('Eisen-Seiten'); p._removeListener (p.activateEvent);

Quelle

2015-06-01 22:22:05 devDesign

Das ist nur schmutzig, mit einer internen API-Methode. –

Switch View mit Tabs in Polymer 1.0

Antwort

Verwandte Themen