Say, you need to implement a language switch in your SPA (single-page application). The “standard” way is to store this setting in every View of Ractive.js translation dictionary and push JSON’s into the embedded views.
This all works fine but complicates further support and maintenance and, thus, maximises the risk of bugs.
Solution
The proposed approach helps to solve the problem of initialization of translation dictionaries in every View of an application. Thereby it allows moving the switching locale into a separate object, and stop worrying about the implementation of switching logic in each View.
Languages on the UI then will be switched automatically while you change a parameter in Backbone.js model.
Implementation steps
1. Move JSON with translations into separate files, that will be loaded dynamically in a Backbone model at the locale definition.
Sample DictionaryModel method, that sets the locale:
2. Create a Ractive calculated property, that reacts on changing the model parameters of a view, and providing the required data for a defined locale.
A sample property is below:
In the template, changing the locale will be automatically supplied with the necessary translation dictionary model change.
For example, login:
3. Finally, switching of the locale itself that occurs on every method invocation:
And that’s it. Simple as is 😎.