使用

Question

I have a <template is="dom-if" if=... that I want to use with a logical condition.

Any binding I try appears to be 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>

What is the correct way to apply an if condition to a dom-if template ?

Answer 1

you have to define your function.

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

and then in script:

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

whenever is property title changed, function _isEqualTo is called. so you don't have to take care of observing property or something.

function _isEqualTo is called with 2 parameters, the second one is just plain string you want to compare some value with.

Answer 2

The only logic you can use in a binding is not. for instance:

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

Answer 3

If your data was such that Foo was boolean or had an attribute that "Foo":true or "isFoo":true . Then you could just do:

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