2017-05-18 1 views
0

Ich habe zwei verschiedene Möglichkeiten zum Einrichten von Tabs in meiner Anwendung funktioniert und nicht. Nicht sicher, was ich falsch mache. Beide Beispiele sind in einem benutzerdefinierten Element Vorlage Auf diese Weise funktioniert:Polymer Papier Tabs funktioniert nicht

<paper-tabs id="clinic-tabs" selected="{{clinicId}}" attr-for-selected="cid" scrollable> 
    <template is="dom-repeat" items="[[clinics]]" filter="_shouldDisplay" observe="active use"> 
    <paper-tab cid="[[item.id]]">[[item.name]]</paper-tab> 
    </template> 
</paper-tabs> 

diese Weise nicht

<paper-tabs selected="{{page}}" attr-for-selected="page" scrollable> 
    <paper-tab page="details">Patient Details</paper-tab> 
    <paper-tab page="finance">Finance Records</paper-tab> 
    <paper-tab page="history">Patient History</paper-tab> 
    <paper-tab page="preopp1">Pre Op Assessment</paper-tab> 
    <paper-tab page="surgery">Surgery Settings</paper-tab> 
    <paper-tab page="postop">Post Op Assessment</paper-tab> 
</paper-tabs> 

Wenn ich einen Haltepunkt auf die onTap Funktion in paper-tab.html setzen, sich auf die erste, wenn ich Verwenden Sie die Konsole zur Ausgabe eines Werts this.cid druckt den richtigen Wert. Wenn ich einen Haltepunkt auf die zweite Version setze, ist this.page undefiniert, obwohl this.getAttibute('page') den richtigen Wert zurückgibt. Als Ergebnis in der zweiten Version gibt es keine Änderung an der {{page}} Wert und so meine Tabs tun nichts.

jemand eine Idee, wie ich kann Setup das Markup auf dem zweiten, so kann ich die Seite Eigenschaft in meiner benutzerdefinierten Element zum Handeln Dinge verwenden (tatsächlich zwischen den verschiedenen Seiten Schalt <iron-pages> verwenden)

Antwort

1

Ich fand heraus, dass eigentlich das Problem ist die page Eigenschaft im Aufnahmeelement (in einem Verhalten erklärt) ist readOnly für den zweiten Fall.

0

Papier-Tabs nicht Attr-für-ausgewählt. Es funktioniert bei der numerischen Auswahl. so ausgewählt = 0, ausgewählt = 1 und so weiter. Das erste Beispiel funktioniert nur, weil Sie wahrscheinlich IDs von 0 bis x setzen.

Dokumentation: https://www.webcomponents.org/element/PolymerElements/paper-tabs/elements/paper-tabs

+1

Eigentlich hat es bei attr-für-ausgewählt, abgeleitet von 'IronSelectorBehaviour'. Sehen Sie meine Antwort unten, die jetzt funktioniert, sobald ich entdeckte, dass die "Seite" -Eigenschaft nur gelesen wurde – akc42

+0

@ akc42 cool, Entschuldigung für meine falsche Antwort, wusste nicht darüber und sogar ich arbeite mit Papier-Tabs so lange Zeit. Danke für deine Korrektur –

Verwandte Themen