How Do I Get The `dom-if` To Re-evaluate Its `if` Condition?

Question

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?

Solution 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) {
      returnNumber(type) === Number(val);
    }
  });
});

<head><basehref="https://cdn.rawgit.com/download/polymer-cdn/1.8.0/lib/"><scriptsrc="webcomponentsjs/webcomponents-lite.js"></script><linkhref="polymer/polymer.html"><linkhref="paper-input/paper-input.html"></head><body><media-element></media-element><dom-moduleid="media-element"><template><paper-inputlabel="Movie Type (1 == mov)"value="{{myType}}"type="Number"maxlength="1"></paper-input><templateis="dom-if"if="[[isType(myType, 1)]]"><h1>mov</h1></template></template></dom-module></body>

codepen

or a computed property like this:

Baca Juga

<template><templateis="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) {
      returnNumber(type) === Number(val);
    }
  });
});

<head><basehref="https://cdn.rawgit.com/download/polymer-cdn/1.8.0/lib/"><scriptsrc="webcomponentsjs/webcomponents-lite.js"></script><linkhref="polymer/polymer.html"><linkhref="paper-input/paper-input.html"></head><body><media-element></media-element><dom-moduleid="media-element"><template><paper-inputlabel="Movie Type (1 == mov)"value="{{myType}}"type="Number"maxlength="1"></paper-input><templateis="dom-if"if="[[isMovType]]"><h1>mov</h1></template></template></dom-module></body>

codepen

JavaScript Controls

How Do I Get The `dom-if` To Re-evaluate Its `if` Condition?

Solution 1:

Post a Comment for "How Do I Get The `dom-if` To Re-evaluate Its `if` Condition?"