Polymer dom-if:如何实现负面条件?

时间:2017-01-13 09:23:34

标签: polymer dom-if

我有一个Polymer元素,使用<template is="dom-if"...根据条件提供不同的HTML内容。

Polymer 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}}" restamp>
      <b>[[title]]</b>
    </template>
    <template is="dom-if" if="{{!title}}" restamp>
      <i>no title</i>
    </template>
  </template>
  <script>
    Polymer({
      is: 'test-thing',
      properties: {
        title: String
      }
    });
  </script>
</dom-module>

<div>
  With negative condition:
  <test-thing></test-thing>
</div>
<div>
  With positive condition:
  <test-thing title="Has Title"></test-thing>
</div>

只有这不起作用 - 否定条件永远不会过去。

应如何实施?

1 个答案:

答案 0 :(得分:6)

您必须为title属性使用默认的空值:

  title:{type: String,value:''}

像这样:

&#13;
&#13;
<link href="https://polygit.org/components/polymer/polymer.html" rel="import">

<dom-module id="test-thing">
  <template>
    <template is="dom-if" if="{{title}}" restamp>
      <b>[[title]]</b>
    </template>
    <template is="dom-if" if="{{!title}}" restamp>
      <i>no title</i>
    </template>
  </template>
  <script>
    Polymer({
      is: 'test-thing',
      properties: {
        title: {type: String,value:''}
      }
    });
  </script>
</dom-module>

<div>
  With negative condition:
  <test-thing></test-thing>
</div>
<div>
  With positive condition:
  <test-thing title="Has Title"></test-thing>
</div>
&#13;
&#13;
&#13;