Bind to attributes

[ozasadnyy]

Is there ability to bind an i18n-msg to attribute? For instance:

<paper-dropdown-menu label="{{change-lang | i18n-msg}}" relative layout inline horizontal center tabindex="0">

Where change-lang is msgid id.

[ebidel]

You could use a computed property or filter that returns the value in your i18nMsg.getMsg('msgid')

[ebidel]

Added this to the demo.

[ozasadnyy]

Thank you @ebidel !

[ozasadnyy]

@ebidel Now I have tried it. After executing i18nMsg.getMsg('change-lang') I get next exception:

Uncaught ReferenceError: i18nMsg is not defined

[ebidel]

Can you post a code snippet? i18nMsg would need to be an instance of <i18n-msg>.

[ozasadnyy]

Sure @ebidel .

Polymer({
        changeLang: function(event, detail, sender) {
            event.preventDefault();
            var lang = sender.getAttribute('data-lang');
            document.documentElement.lang = lang;
            I18nMsg.lang = lang;

            var labelsToChange = document.querySelectorAll('html /deep/ paper-dropdown-menu');
            for (var i = labelsToChange.length - 1; i >= 0; i--) {
                if (labelsToChange[i].hasAttribute('data-i18n')) {
                    var label = labelsToChange[i].getAttribute('data-i18n');
                    labelsToChange[i].setAttribute('label', i18nMsg.getMsg(label));
                }
            };
        }
    });

[ebidel]

I don'see where you define i18nMsg. Note the lower case.

[ozasadnyy]

So I should define somewhere <i18n-msg msgid="change-lang" style="display:none;"> and then take value frome this element? Or you are talking about something else? Also, in separate script file I define default language after templates bounded.

   var app = document.querySelector('#app');

    app.addEventListener('template-bound', function() {
        document.documentElement.lang = document.documentElement.lang || 'en';
        I18nMsg.lang = document.documentElement.lang || 'en';
    });

[ebidel]

That's right. In order to use the element's .getMsg() method, you need to declare it somewhere in your shadow dom or instantiate it in js using document.createElement