【发布时间】:2015-12-12 00:26:13
【问题描述】:
我正在尝试在Polymer 1.0 模板中重新计算和呈现一个值。但是,我正在尝试在不绑定任何属性的情况下执行此操作。
如果它很重要,用例是一种翻译机制,它使用字符串键来查找翻译后的值。当 'translations' 值改变时,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")。
这可能吗?有没有办法重新渲染模板,甚至只是手动重新渲染整个组件?如何?如果没有,在绑定中没有属性的情况下,获取计算值或重新渲染模板的最简单方法是什么?
【问题讨论】:
-
我用 dom-if 做这样的事情。我将“已初始化”属性设置为 false,当翻译完成加载时,我将其设置为 true,这将渲染 dom-if 模板中的部分,从而评估计算值。虽然我今天在 Polymer 3,但我发现即使是 Polymer 1 也已经支持它。
标签: polymer-1.0