Skip to content Skip to sidebar Skip to footer
Home / Javascript / Polymer / Polymer 1.0

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

Post a Comment
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) {
      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  href="polymer/polymer.html">
  <link  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  href="polymer/polymer.html">
  <link  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


You may like these posts

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