如何获得"dom-if"以重新评估其"if"条件? [英] How do I get the `dom-if` to re-evaluate its `if` condition?
本文介绍了如何获得"dom-if"以重新评估其"if"条件?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在下面的代码中，if条件仅在初始化时求值.更改myType时如何重新评估条件?
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://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>
或计算属性像这样:
<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>
这篇关于如何获得"dom-if"以重新评估其"if"条件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
