使用带有条件的<template is ="dom-if"

Kei*_*ith 4 polymer polymer-1.0 dom-if

我有一个<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>
Run Code Online (Sandbox Code Playgroud)

if条件应用于dom-if template?的正确方法是什么?

Kub*_*ský 16

你必须定义你的功能.

<template is="dom-if" if="[[_isEqualTo(title, 'Foo')]]">
Run Code Online (Sandbox Code Playgroud)

然后在脚本中:

function _isEqualTo(title, string) {
  return title == string;
}
Run Code Online (Sandbox Code Playgroud)

只要属性title发生变化,_isEqualTo就会调用函数.所以你不必照顾观察财产或其他东西.

函数_isEuqalTo用2个参数调用,第二个只是普通字符串,你要比较一些值.