2017-04-18 3 views
0

Ich habe eine <template is="dom-if" if=..., die ich mit einer logischen Bedingung verwenden möchte.Verwendung von <template is = "dom-if" mit einer Bedingung

Jede Bindung Ich versuche, erscheint truthy zu sein:

<link href="https://polygit.org/components/polymer/polymer.html" rel="import"> 
 

 
<dom-module id="test-thing"> 
 
    <template> 
 
    <template is="dom-if" if="{{title == 'foo'}}" restamp> 
 
     Title is <b>FOO</b> 
 
    </template> 
 
    <template is="dom-if" if="{{title}} == 'bar'" restamp> 
 
     Title is <b>BAR</b> 
 
    </template> 
 
    
 
    Actual: "{{title}}" 
 
    </template> 
 
    <script> 
 
    Polymer({ 
 
     is: 'test-thing', 
 
     properties: { 
 
     title: {type: String,value:''} 
 
     } 
 
    }); 
 
    </script> 
 
</dom-module> 
 

 
<div> 
 
    Title: foo<br> 
 
    <test-thing title="foo"></test-thing> 
 
</div> 
 
<div> 
 
    Title: bar<br> 
 
    <test-thing title="bar"></test-thing> 
 
</div> 
 
<div> 
 
    Title: abc<br> 
 
    <test-thing title="abc"></test-thing> 
 
</div>

Was ist der richtige Weg, um einen if Zustand zu einem dom-iftemplate bewerben?

Antwort

7

müssen Sie Ihre Funktion definieren.

<template is="dom-if" if="{{_isEqualTo(title, 'Foo')}}"> 

und dann in Skript:

function _isEqualTo(title, string) { 
    return title == string; 
} 

, wenn Eigenschaft ist title geändert, Funktion _isEqualTo aufgerufen. Sie müssen also nicht darauf achten, Eigentum oder etwas zu beobachten.

Funktion _isEuqalTo wird mit 2 Parametern aufgerufen, die zweite ist nur eine einfache Zeichenfolge, die Sie einen Wert mit vergleichen möchten.

+0

Dank Kuba - Ich weiß, dass ich die Bedingung in einer Funktion wickeln kann oder eine Eigenschaft hinzufügen, die gesetzt wird, wenn die entsprechende Eigenschaft geändert werden, aber ist das wirklich die einzige Weg? Es fühlt sich sehr klobig an, eine Funktion nur so zu extrahieren, dass ein "if" -Block das 'if' auswerten kann. – Keith

+0

gibt es keinen anderen Weg. Sie können auch "berechnete" oder "Beobachter" -Eigenschaften der Eigenschaft verwenden. Aber es gibt nichts wie {{title == 'foo'}}. Du musst dich daran gewöhnen. Ich habe den Lenker vor dem Polymer benutzt und es war am Anfang sehr nervig für mich, also weiß ich, wie es dir geht: D. –

3

Die einzige Logik, die Sie in einer Bindung verwenden können, ist nicht. zum Beispiel:

<template is="dom-if" if="{{_isEqualTo(title, 'Foo')}}"> 
<template is="dom-if" if="{{!_isEqualTo(title, 'Foo')}}"> 
0

Wenn Ihre Daten war so, dass Foo boolean war oder hatte ein Attribut, dass "Foo": true oder "isFoo": true. Dann könnten Sie gerade tun:

<template is="dom-if" if="{{isFoo}}"> 
    Foo 
</template> 
Verwandte Themen