Polymer 1.0 behaviors changes not propagated -

i'm trying make custom i18n behaviors (there no i18n component fit need currently, check i18n-msg, i18n-next custom implementations found on stackoverflow...).

it works on first page generation when try change language, labels not updated.

here code :

behavior :

var polymer = polymer || {};     /* defining behavior's */     polymer.i18n = polymer.i18n ||{         properties: {             lang: {                 type: string,                 value: "en",                 observer: '_onchangedlocale'             },             /** exposes translations */             translation: {                 type: object,             }         },         created: function() {             /* initialisation */             this._onchangedlocale(polymer.i18n.lang);         },         _onchangedlocale: function(locale) {             switch(locale) {                 case 'de':                     polymer.i18n.translation = i18nde;                     break;                 default:                     polymer.i18n.translation = i18nen;             }         },         i18n: function(key) {             return polymer.i18n.translation[key] ? polymer.i18n.translation[key] : key;         } } 

component implement behavior :

<dom-module id="my-page">     <template>         [[i18n('hello')]]         <span on-click="onchangelanguagedeclick">de</span>     </template>     <script>         polymer({             is: "my-page",             /* use localisation */             behaviors: [polymer.i18n],             onchangelanguagedeclick:function (event, detail, sender){                 this.lang = 'de';             },         });     </script> </dom-module> 

i18nde et i18nen jsonobject contains translations.

when click on 'de', _onchangedlocale called, polymer.i18n.translation updated not '[[i18n('hello')]]' stay first value if nothing happened.

did miss ? polymer doc speak 'notifypath' don't understand how use in case

resolution : problem lifecycle. polymer evaluate dom , data-binding before component properties initialization... either got error properties not defined (in case not using 'created' callback) when using this.my-prop. or did, works first time change never repercuted.

it's absolutely not documented , don't see other informations rid of that, give second parameter [[i18n('hello')]] => [[i18n('hello',translation)]]. function i18n still take on argument doing that, tell polymer function use propertie 'translation' allow him change lifecycle , evaluate expression after properties initialization. , works expected...

i recommend have own namespace , not use polymer. add import polymer.html in behavior definition if not exist now.

try making below changes , see if works.

    /* defining behavior's */     polymer.i18n = polymer.i18n ||{         properties: {             lang: {                 type: string,                 value: "en",                 observer: '_onchangedlocale'             },             /** exposes translations */             translation: {                 type: object,             }         },         created: function() {             /* initialisation */             this._onchangedlocale(this.lang);         },         _onchangedlocale: function(locale) {             switch(locale) {                 case 'de':                     this.translation = i18nde;                     break;                 default:                     this.translation = i18nen;             }         },         i18n: function(key) {             return this.translation[key] ? this.translation[key] : key;         }