<template is = "dom-if"を条件付きで使用する

Question

私は<template is="dom-if" if=...を論理条件で使いたいと思っています。

私がしようと、任意の結合がtruthyように表示されます。

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

dom-iftemplateからif条件を適用する正しい方法は何ですか？

Answer 1

あなたの機能を定義する必要があります。

スクリプト内

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

、その後：

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

プロパティtitleが変更されるたびに、機能_isEqualToが呼び出されます。あなたは不動産や何かを観察する必要はありません。

関数_isEuqalToは2つのパラメータで呼び出され、2つ目のパラメータは値を比較する単純な文字列です。

Answer 2

バインドで使用できる唯一のロジックはありません。例えば ：

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

Answer 3

あなたのデータはfooがブールたかの属性を持っていたようなものであった場合、その "フー"：trueまたは "isFoo"：真。次に、あなただけ行うことができます：

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