How do I get the `dom-if` to re-evaluate its `if`

In my code below, the if condition is only evaluated at init. How do I get it to re-evaluate the condition whenever myType is changed?

<dom-module id="media-element">
  <template>
    <template is="dom-if" if="[[isType(0)]]">
      ....
    </template>
  </template>

  <script>
    Polymer({
      is: 'media-element',
      properties: {
        myType: {
          type: Number,
          value: 0
        }
      },
      isType: function(t){return (this.myType===t);}
    });
  </script>
</dom-module>

标签： javascript polymer polymer-1.0

1条回答

对你真心纯属浪费

2楼-- · 2019-07-25 17:17

You could use a computed binding like this:

<template is="dom-if" if="[[isType(myType, 1)]]">

HTMLImports.whenReady(() => {
  Polymer({
    is: 'media-element',
    properties: {
      myType: {
        type: Number,
        value: 0
      }
    },
    isType: function(type, val) {
      return Number(type) === Number(val);
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.8.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-input/paper-input.html">
</head>
<body>
  <media-element></media-element>

  <dom-module id="media-element">
    <template>
      <paper-input label="Movie Type (1 == mov)"
                   value="{{myType}}"
                   type="Number"
                   maxlength="1"></paper-input>
      <template is="dom-if" if="[[isType(myType, 1)]]">
        <h1>mov</h1>
      </template>
    </template>
  </dom-module>
</body>

codepen

or a computed property like this:

<template>
  <template is="dom-if" if="[[isMovType]]">...</template>
</template>
<script>
  Polymer({
    is: 'media-element',
    properties: {
      myType: {
        type: Number,
        value: 0
      },
      isMovType: {
        computed: 'isType(myType, 1)'  // <-- computed property
      }
    },
    isType: function(type, val) {
      return type === Number(val);
    }
  });
</script>

HTMLImports.whenReady(() => {
  Polymer({
    is: 'media-element',
    properties: {
      myType: {
        type: Number,
        value: 0
      },
      isMovType: {
        computed: 'isType(myType, 1)'
      }
    },
    isType: function(type, val) {
      return Number(type) === Number(val);
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.8.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-input/paper-input.html">
</head>
<body>
  <media-element></media-element>

  <dom-module id="media-element">
    <template>
      <paper-input label="Movie Type (1 == mov)"
                   value="{{myType}}"
                   type="Number"
                   maxlength="1"></paper-input>
      <template is="dom-if" if="[[isMovType]]">
        <h1>mov</h1>
      </template>
    </template>
  </dom-module>
</body>

codepen

0人赞添加讨论(0) 举报

How do I get the `dom-if` to re-evaluate its `if`

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间