Polymer 1.0:无属性绑定的刷新/重新渲染计算值

时间:2015-12-12 00:26:13

标签: polymer-1.0

我试图在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")

这可能吗?有没有办法重新渲染模板,甚至只是手动重新渲染整个组件?怎么样?如果没有,在绑定中没有属性的情况下,重新渲染计算值或模板的最简单方法是什么?

1 个答案:

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