使用

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 。 所以你不必照顧觀察財產或其他東西。

函數_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>