Skip to content

Translate page strings

Scott Erickson edited this page May 19, 2016 · 2 revisions


You want to set up a page for translation.


Within Jade, add the attribute data-i18n to the element to set its text. The value of the attribute should point to a string in /app/locale/ To set the translated string to an attribute instead of the element's text value, preface the string with the attribute name in brackets. Within CoffeeScript, use $.i18n.t(). Mark sections of templates that are not to be translated with DNT. Do not leave English strings in the template.


All static strings to be translated are kept in /app/locale/ When a jade template is rendered by a CocoView, it finds all elements with the attribute data-i18n, and based on the user's language settings, takes strings from the locale folder for that key. Strings that are not translated default to the English translation. We use a forked version of i18next.


module.exports = 
    info: "Information"
    enter_name: "Enter name here"
    send: "Send"
    sending: "Sending"

Jade file

h1(data-i18n="") // Will display "Information" in English.
input(data-i18n="[placeholder]common.enter_name") // Placeholder will be "Enter name here" in English.
button(data-i18n="common.send") // Button starts as "Send", but onSubmit, is changed to "Sending"
p Just have this in English // DNT


onSubmit: ->


Clone this wiki locally
You can’t perform that action at this time.