Polymer 1.0: Refresh/Re-Render Computed Value Without Property Binding

Question

I'm trying to re-compute and render a value within a Polymer 1.0 template. However, I'm trying to do this without binding to any properties.

In case it matters, the use case is for a translation mechanism that uses a string key to find the translated value. When the 'translations' value changes, the translate() call needs to be re-computed.

The component definition is as follows :

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

I can get the refresh to work by adding the translations property to the translate() call as follows :

<p><span>[[translate("SOME_STRING", translations)]]</span></p>

However, what I would like to do is re-compute/refresh without having to put the translations property as a second parameter in every call (there's other reasons too).

Basically, when the translations object updates with different locale translations, I'd like the translate("SOME_STRING") to be re-computed.

Is this possible? Is there any way to re-render the template or even just re-render the entire component manually? How? If not, what is the simplest way to get the computed value or template re-rendered without a property in the binding?

Answer 1

How about that????

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