web-dev-qa-db-ja.com

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

論理条件で使用したい<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>

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

polymerpolymer-1.0dom-if
7
Keith

関数を定義する必要があります。

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

そしてスクリプトで：

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

プロパティtitleが変更されるたびに、関数_isEqualToが呼び出されます。したがって、プロパティや何かを監視する必要はありません。

関数 _isEqualToは2つのパラメーターで呼び出されます。2番目のパラメーターは、いくつかの値と比較するプレーンストリングです。

16
Kuba Šimonovský

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

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

データがFooがブール値であるか、または "Foo"：trueまたは "isFoo"：trueの属性を持っている場合。その後、あなたはただ行うことができます：

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