在条件下使用 <template is="dom-if"

Question

我有一个<template is="dom-if" if=...，我想在逻辑条件下使用它。

我尝试的任何绑定似乎都是 真实的:

<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-if template 的正确方法是什么？

Answer 1

你必须定义你的函数。

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

然后在脚本中：

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

只要属性 title 改变，函数 _isEqualTo 就会被调用。所以你不必注意观察属性或其他东西。

函数 _isEqualTo 使用 2 个参数调用，第二个参数只是您要与某些值进行比较的普通字符串。

Answer 2

您可以在绑定中使用的唯一逻辑不是。例如：

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

Answer 3

如果您的数据 Foo 是布尔值或具有 "Foo":true 或 "isFoo":true 的属性。那么你可以这样做：

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

在条件下使用 <template is="dom-if"

Using <template is="dom-if" with a condition

polymer

polymer-1.0

dom-if