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

问题

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>

回答1:

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://cdn.rawgit.com/download/polymer-cdn/1.8.0/lib/">
  <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://cdn.rawgit.com/download/polymer-cdn/1.8.0/lib/">
  <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

来源：https://stackoverflow.com/questions/42515593/how-do-i-get-the-dom-if-to-re-evaluate-its-if-condition

标签

javascript

polymer

polymer-1.0