Description
Currently it is difficult to translate data with additional arguments coming from server.
If translation key isn't static but comes dynamic for example from server we need use some workarounds:
in our locales.json we have:
{
"en": {
"paid": "Hello {name} please pay {charge}",
},
"fr": {
"paid": "Bonjour {name} S'il vous plaît, n'hésitez pas {charge}"
}
}
logic:
attached: function() {
this.loadResources(this.resolveUrl('locales.json'));
this.getTitleLabel().then(response => {
this.paymentTitle = response; //['paid', 'name', 'Ethan', 'charge', 21.37]
})
}
view
<p>{{localize(paymentTitle)}}</p>
It doesn't work because localize() method does not support array value as argument
We can call this.localize() in response handler but sometimes it work only with setTimeout()
this.getTitleLabel().then(response => {
setTimeout(() => {
this.paymentTitle = this.localize(...response); //'Hello Ethan please pay 21.37'
})
})
this workaround works, but it is ugly.
render
<p>Hello Ethan please pay 21.37</p>
Expected outcome
attached: function() {
this.loadResources(this.resolveUrl('locales.json'));
this.getTitleLabel().then(response => {
this.paymentTitle = response; //['paid', 'name', 'Ethan', 'charge', 21.37]
})
}
view template
<p>{{localize(paymentTitle)}}</p>
should render DOM:
<p>Hello Ethan please pay 21.37</p>
Actual outcome
localize() method return undefined when we pass array value as argument
Pull Request
PR #140
Description
Currently it is difficult to translate data with additional arguments coming from server.
If translation key isn't static but comes dynamic for example from server we need use some workarounds:
in our
locales.jsonwe have:{ "en": { "paid": "Hello {name} please pay {charge}", }, "fr": { "paid": "Bonjour {name} S'il vous plaît, n'hésitez pas {charge}" } }logic:
view
It doesn't work because
localize()method does not support array value as argumentWe can call
this.localize()in response handler but sometimes it work only withsetTimeout()this workaround works, but it is ugly.
render
Expected outcome
view template
should render DOM:
Actual outcome
localize()method returnundefinedwhen we passarrayvalue as argumentPull Request
PR #140