Replacing strings in templates with a reference to a 'dictionary' file

I’m currently half way through working on an Ember app (currently 3.12) and I’ve hit across the idea of replacing my hardcoded strings in templates with a reference to a centrally maintained ‘dictionary’ file. So instead of:

// template.hbs

<p>Hello World</p>

It would be something like:

<p> {{dictionary.hello_world}}</p>

I wondered what the most ‘Ember-y’ way to do it would be and if anyone had any suggestions? Just thinking off the top of my head I thought you could perhaps do it in a service but being unable to import services directly into templates would require a bunch of pointless controllers.

I guess you could wrap templates up in a dictionary style component that just exposed a bunch of keys but this would require doubling up on the key value pair in the component.js file and then exposing it in the yield of its template.hbs.

In the absolutely perfect world I would be able to edit strings without a recompile of the app - it’s being used in an environment where the wording might need to be changed fairly often so i thought of potentially adding a JSON or YML file in the /public folder but I’m not sure how happy Ember is for you to mess about with the what goes in there.

Apologies if the above is a bit ranty, I haven’t put anything into code yet because I didn’t want to sound like I wanted someone to write something for me but if anyone has some gotchas or experience with something similar in Ember I’d definitely love to hear your input.

Check out ember-intl GitHub - ember-intl/ember-intl: Localization library for any Ember Application or Addon

Yep, I think that will do nicely! Cheers!