i18next - brunch and backbone setup

Question

After searching for a while and trying different options I decided to use i18next 1 to internationalize a brunch and backbone based web application. However I'm struggling a bit with where to initialize i18next to have i18n support available throughout the application.

Currently I put the initialization into the main Backbone.Marionette.Application like:

@addInitializer (options) ->
  Media  = require 'models/media'
  Router = require 'lib/router'

  @media = new Media

  # setup routing and html5 history
  $.i18n.init
    lng: 'en-Us'
    fallbackLng: 'en'
    debug: true
  , (t) =>
    console.log 'i18n initialized'


  @router = new Router controller: this
  Backbone.history.start()

Although I do not get any errors and the translation files are properly loaded, I have not been able to get the strings translated.

The respective html looks then like this:

<h5 data-i18n="title-text.unnamedtitle" class="title-text"></h5>

which is matched with the title-text key in the translation files.

Any idea how to handle this?

Answer 1

Initialization inside App initializer should be fine. What is missing is to actually use i18next library and apply it to rendered views.

If you use views from Marionette, you can provide onRender method:

onRender: function() {
    this.$el.i18n();
}

If you render views directly, try to add this.$el.i18n(); to the end of render method.