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