Translation using the default locale file

[gmunumel]

Hello guys.

I really like the library, I think is great, but I'm having a bad time trying to get a translation working. For example, I have the following:

In my template I'm using:

 {{formatMessage (intlGet "messages.test")}}

In my locale file I have something like:

HandlebarsIntl.__addLocaleData({"locale":"en", "test":"it works", "messages": { "test": "it works" }, 
...

Is this should work? I don't know if I'm missing something.

ember most recent version support something similar: https://github.com/yahoo/ember-intl/tree/2.0#intl-get

[caridy]

No, __addLocaleData is only for internal CLDR data that the library needs to make decisions, it is not meant to be used to define/set messages per language. Instead, you should pass those messages as data when rendering the template, like this:

var context = {
    foo: 1,
    bar: 0.9
};

var intlData = {
    "locales": "en-US",
    "messages": {
       "test": "it works"
    }
};

var html = template(context, {
    data: {intl: intlData}
});

then, your template could use messages.test as a valid ICU message that can be resolved:

{{formatMessage (intlGet "messages.test")}}

You can read a lot more about all these here: http://formatjs.io/handlebars/

In the case of ember-intl, there is a lot more boilerplate that does some extra work to integrate it with ember data flow.

[mediafreakch]

@caridy I have trouble understanding the concept as well and got fooled the same way. There are several parts in the documentation that were misleading me:

When you need to format data in another locale, include its data; e.g., for French: here

You can do this by having the server embed the chosen locale into the generate page. here

I'm confused now. Including another locale doesn't apply to custom messages?

Why would I define and set my locale messages in my application code? Isn't that what this library tries to avoid? Ideally, I would like my application code to be free of any language specific code.

Also, the API of that intlData object is not clear to me. Is there a reference to what the properties of that object are and what they do?

Can you help me get the full picture?

Many thanks!

[mediafreakch]

My question is related to client-side templating and seems that the same was discussed in #57 without satisfying resolution

[caridy]

@mediafreakch intlData in the example above is not part of your application code, most likely, it will be form by your server per request, or even computed at build time and pushed to your CDN. In your code, you only reference to tokens that are used to lookup for messages in that data structure that was provisioned in your page ahead of time. I hope that clarifies that part.

As for the stuff set up via __addLocaleData(), we provide that data, it is CLDR data needed by this engine to compute messages, dates, numbers, etc. The format we use should for that structure should not leak to user-land, because we can change it at any given time. Just make sure you include the right file that calls __addLocaleData() to prepare your app to function. In the future, once browsers start implementing pluralization rules (Intl.PluralRules() is the proposal we are considering), that data is not longer needed because the browser will provide the low level api to figure pluralization, in which case, you will not need to load the data we provided today.

[mediafreakch]

@caridy ok, I think I got the point. I would provision intlData ahead of time by creating standalone files that contain the translated messages (eg. en-US.js, de-DE.js, etc.), then expose them as a global to client side scripts, eg. window.APP.translations. The server would then choose and include the right file into the page. The application could then just lookup the keys in the defined global:

var template = Handlebars.compile(/* Template source above */);

var html = template(context, {
    data: { intl: window.APP.translations }
});

One more question: What's the intlData object's API? Why is there for example a locales key inside? Are there other properties I need to be aware of?

[caridy]

Excellent, that will work.

As for intlData structure, it has formats, locales and messages. you can see examples of those in the docs http://formatjs.io/handlebars/ in the "render" panel in each example.

you need locales and optionally formats because your messages might contain number, and data tokens, e.g.: "You have reach {value, number, percent}", for that, locale information is needed.

[mediafreakch]

Perfect, thanks for the clarification!