polymer dom-if : how do I implement a negative condition?

标签 polymer dom-if

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

polymer dom-if没有 else 条件,因此需要一个否定的 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>

只有这样是行不通的 - 否定条件永远不会过去。

应该如何实现?

最佳答案

您的标题属性必须使用默认的空值:

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

像这样:

<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>

关于 polymer dom-if : how do I implement a negative condition?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41631186/

相关文章:

polymer 1.0 : How to make paper-button change color on hover?

polymer - 如何过滤 polymer 1.0 中的铁列表?

javascript - 通过重复创建 polymer 滑动页面

button - Dart polymer -捕捉切换事件-纸支架内的按钮。 polymer_20错误

javascript - polymer this 指针

polymer - 使用 <template is ="dom-if"和条件