title: Load order for i18next initialization
body: <p>I'm having some issues getting i18next to initialize properly and pull out the appropriate translation strings. There are a few libraries in the mix:</p>
  
  <ul>
  <li>PhoneGap 3.x</li>
  <li>Backbone.js</li>
  <li>Require.js</li>
  <li>i18next.js</li>
  <li>handlebars.js</li>
  </ul>
  
  <p>My app.js has the following for the document.ready function:</p>
  
  <pre><code>$(document).ready(function () {
      var lang    = "",
          locale  = "en-AU";  // default
  
      // get the user's locale - mobile or web
      if (typeof navigator.globalization !== 'undefined') {
          // on mobile phone
          navigator.globalization.getLocaleName(
              function (loc) {locale = loc.value; },
              function () {console.log('Error getting locale\n'); }
          );
      } else {
          // in web browser
          lang = navigator.language.split("-");
          locale = lang[0];
      }
      console.log("locale: %s", locale);
  
      i18n.init({
          lng: locale,
          debug: true,
          fallbackLng: 'en'
      }, function () {
          // i18next is done asynchronously; this is the callback function
          $("body").i18n();
      });
  </code></pre>
  
  <p>Unfortunately, the code isn't even hitting the document.ready breakpoint I've set. Instead, the router.js define is calling the initialization code in the View class first:</p>
  
  <pre><code>define(function (require) {
  
  "use strict";
  
  var $           = require('jquery'),
      Backbone    = require('backbone'),
      Handlebars  = require('handlebars'),
      i18next     = require('i18next'),
      HomeView    = require('app/views/HomeView'),
      homeView    = new HomeView(); // &lt;&lt;-- this line
  </code></pre>
  
  <p>...Homeview.js:</p>
  
  <pre><code>define(function (require) {
  
  "use strict";
  
  var $               = require('jquery'),
      Handlebars      = require('handlebars'),
      Backbone        = require('backbone'),
      i18next         = require('i18next'),
      tplText         = require('text!tpl/Home.html'),
      template = Handlebars.compile(tplText);
  
  
  return Backbone.View.extend({
      initialize: function () {
          this.render();
      },
      render: function () {
          this.$el.i18n(); // &lt;&lt; causes an error
          this.$el.html(template());
  
          return this;
      }
    });
  });
  </code></pre>
  
  <p>During the page load, a TypeError is thrown: </p>
  
  <pre><code>'Undefined' is not a function (evaluating 'this.$el.i18n()')
  </code></pre>
  
  <p>Any idea what I'm doing wrong here?</p>
  
  <hr>
  
  <p><em>EDIT</em>: require.config block in app.js (including shim):</p>
  
  <pre><code>require.config({
  
  baseUrl: 'lib',
  paths: {
      app: '../js',
      'i18next': 'i18next.amd-1.7.2',
      tpl: '../tpl'
  },
  map: {
      '*': {
          'app/models': 'app/models/memory'
      }
  },
  shim: {
      'handlebars': {
          exports: 'Handlebars'
      },
      'backbone': {
          deps: ['underscore', 'jquery'],
          exports: 'Backbone'
      },
      'underscore': {
          exports: '_'
      },
      'i18next': ['jquery']
  }
  });
  </code></pre>