Skip to content

support to pass array value to localize() method #139

@rudzikdawid

Description

@rudzikdawid

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.

<p>{{paymentTitle}}</p>

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions