Polymer: Evaluate expression after ajax response - data-binding

Question

I have custom polymer component that will load my translations for whole application. Here is the code:
<link rel="import" href="../polymer/polymer-expressions/polymer-expressions.html">
<link rel="import" href="../polymer/core-ajax/core-ajax.html">
<polymer-element name="nz-i18n" hidden>
<script type="text/javascript">
Polymer('nz-i18n', {
/**
* our messages container
*/
messages: {},
/**
* what loading is in progress
*/
loading: {},
created: function() {
var self = this;
// create new expression, to be used for translate method
PolymerExpressions.prototype.$$ = function(key, params) {
// IMPORTANT !!! the scope here is the element we call this function from
// set this element as parent of the translator
self.parent = this;
// get translation
return self.translateMessage(key, params);
};
// restore loaded messages from local storage
//this.restoreFromLocalStorage();
},
/**
* Load messages from local storage
*/
restoreFromLocalStorage: function() {
// check if we have translations already loaded
try {
if (translations = localStorage.getItem('nz-messages')) {
// convert JSON string representation to object
this.messages = JSON.parse(translations);
return true;
}
} catch (e) {
// nothing to do
// we will load translations on demand
}
},
/**
* Translate message by given key and additional parameters
*
* IMPORTANT !!!do not use translate as the method name
* there is such a property in the element
*
* #param key - key to be translated
* #param params - additional parameters
*/
translateMessage: function(key, params) {
// set default parameters if not defined
if (!params || params == 'undefined') {
var params = {};
}
if (!params.module) {
params.module = 'System';
}
var msg;
if (this.messages[params.module]) {
// module messages are already loaded
try {
// try to get translation
msg = this.messages[params.module].messages[key] || key;
// key with multiple forms has been provided
if (typeof(msg) == "object") {
if (params.n != '' && params.n != 'undefined') {
//get index if the translation in function of the rules
eval('idx = ' + this.messages[params.module].pluralRules.replace('n', params.n) + ';');
msg = msg[idx] || key;
} else {
msg = msg[0];
}
}
} catch (e) {
//no translation - return the key
msg = key;
}
} else {
// module messages are not loaded
// start loading
this.loadTranslations(params.module);
// this will be processed very customly
msg = '';
}
return msg;
},
/**
* Load messages for the module requested
*
* #param module - messages module
* #param force - if we have to force loading even if
* messages for the module are already loaded
*/
loadTranslations: function(module, force) {
// set defaults
if (!module) {
module = 'System';
}
// check if translations for this module are loaded
// or if loading is in progress
if (!this.loading[module] && (force || !this.messages[module])) {
// noooooooo - we will load them
this.loading[module] = true;
// create ajax request
ajax = document.createElement('core-ajax');
ajax.auto = true;
ajax.method = 'GET';
ajax.handleAs = 'json';
ajax.headers = {
"Accept": "application/json",
"Content-type": "application/json"
};
ajax.url = window.basePath + 'api/translations';
ajax.params = {"module": module};
// register event listeners for the response and post response processing
ajax.addEventListener('core-response', this.handleResponse);
ajax.parent = this;
// do not uncomment this - http://xhr.spec.whatwg.org/
//ajax.xhrArgs = {sync: true};
}
},
/**
* Process messages loading request
*/
handleResponse: function() {
// IMPORTANT !!!! core-ajax scope is here
if (this.response) {
for (module in this.response) {
// add current response to the translations
this.parent.messages[module] = this.response[module];
// remove loading flag for this module messages
delete this.parent.loading[module];
}
// set translations in local storage
localStorage.setItem('nz-messages', JSON.stringify(this.parent.messages));
}
}
});
</script>
</polymer-element>
I have also another element that will be used as a frameset and will host all my other application elements:
<link href="../../polymer/core-header-panel/core-header-panel.html" rel="import">
<link href="../../polymer/core-toolbar/core-toolbar.html" rel="import">
<polymer-element name="nz-frameset">
<template>
<link href="nz-frameset.css" rel="stylesheet">
<core-header-panel flex>
<!-- HEADER -->
<core-toolbar justify="between">
<img id="logo" src="../../images/logo.png" />
<div id="title">{{ $$('header_title') }}</div>
</core-toolbar>
<!-- CONTENT -->
<div class="content">{{ $$('num', {n: 4}) }}</div>
</core-header-panel>
<!-- FOOTER -->
<core-toolbar bottomJustify="around">
<footer class="bottom">
{{ $('footer') }}
</footer>
</core-toolbar>
</template>
<script type="text/javascript">
Polymer('nz-frameset', {
ready: function() {
},
});
</script
</polymer-element>
And here is my body(all imports needed are in the HEAD):
<body fullbleed vertical layout unresolved>
<!-- INITIALIZE TRANSLATOR -->
<nz-i18n></nz-i18n>
<!-- LOAD FRAMESET -->
<nz-frameset flex vertical layout></nz-frameset>
</body>
The problem is that when I open my APP for the first time and no translations are loaded yet, after I update my messages container the expressions does not re-bind and i can not see any text. On refresh(messages are in the local storage already), everything works like a charm.
Any help? Thanks!

Answer 1

One issue that I saw right from the get-go is that the expressions will only be evaluated once since there is no observable value in it, e.g. the observer doesn't see a variable reference and can detect changes.
This might be a hack, but I would pass a "changeable variable" and filter it in the expression, e.g.
<div id="title">{{ n_translate | $$('header_title') }}</div>
Now you need to fire an event whenever you load a new translation, in your handle handleResponse just add:
this.fire("translationChanged");
In every module that uses translations, you need to add a event observer:
this.addEventListener("translationChanged", function() {
this.n_translate = new Date(); // some changed value
});
There is no easy way to re-trigger polymer expressions, actually I don't know of any other than little hacks (for template lists, etc) that in the end cause more problems then help.