Quick Tip in Sproutcore - Text Localization

March 22
blog author

dliau

Developer

Localization is a very important aspect of any app or website. The internet connects everyone, so no matter what you're building, you should consider localization. Sproutcore makes it very easy to localize your text. Your folder structure helps organize the languages we want to include. Projects I usually work on look like this.

apps/
  myApp/
    core.js
  frameworks/

We like to organize components of the app in different frameworks so we can reuse similar features. To localize strings, we'll need to add a 'en' (or another language code) folder and a 'strings.js' file in our project. The project I'm working on has the language folder in a framework.

apps/
  myApp/
    en/
      strings.js
    core.js
  frameworks/
    locale/
      en/
        strings.js

The strings.js folder will look like this:

SC.StringsFor('en', {
  'key': 'value'
  'Title': 'Title Text'
});

Where 'key' is the variable and 'value' is the translation/text. We can use the translation in a view similar to this:

SC.AlertPane.warn({
  layerId: "info-alert",
  message: "Title".loc(),
  description: "PleaseWait".loc(),
});

or in a handlebar like this:

{{loc "Title"}}

There is a great blog by Peter Bergstrom on the Sproutcore website that goes a more in-depth about localization.