我试图在Polymer 1.0
模板中重新计算和呈现值。但是,我试图在不绑定任何属性的情况下这样做。
如果重要,用例是针对使用字符串键查找翻译值的翻译机制。当翻译'值更改后,需要重新计算translate()
调用。
组件定义如下:
<dom-module id="my-component">
<template>
<style></style>
<p><span>[[translate("SOME_STRING")]]</span></p>
</template>
<script>
var MyComponent = Polymer({
is: "my-component",
properties: {
translations: {
type: Object,
notify: true,
value: {
"SOME_STRING": "Some String"
}
}
},
translate: function (key) {
if (this.translations.hasOwnProperty(key)) {
return this.translations[key];
}
}
});
</script>
</dom-module>
我可以通过将translations
属性添加到translate()
调用来使刷新工作,如下所示:
<p><span>[[translate("SOME_STRING", translations)]]</span></p>
但是,我想要做的是重新计算/刷新而不必将translations
属性作为第二个参数放在每个调用中(还有其他原因)。
基本上,当translations
对象使用不同的区域设置翻译进行更新时,我希望重新计算translate("SOME_STRING")
。
这可能吗?有没有办法重新渲染模板,甚至只是手动重新渲染整个组件?怎么样?如果没有,在绑定中没有属性的情况下,重新渲染计算值或模板的最简单方法是什么?
答案 0 :(得分:1)
怎么样????
<dom-module id="my-component">
<template>
<style></style>
<p><span>[[str]]</span></p>
</template>
<script>
var MyComponent = Polymer({
is: "my-component",
properties: {
translations: {
type: Object,
notify: true,
value: {
"SOME_STRING": "Some String"
},
observer: '_Changed'
},
str: {
type: String,
value: "hello"
}
},
_Changed: function(){
this.set("str",this.translate(this.str));
},
translate: function (key) {
if (this.translations.hasOwnProperty(key)) {
return this.translations[key];
}
}
});
</script>