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:
- PhoneGap 3.x
- Backbone.js
- Require.js
- i18next.js
- handlebars.js
My app.js has the following for the document.ready function:
$(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();
});
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:
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(); // <<-- this line
...Homeview.js:
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(); // << causes an error
this.$el.html(template());
return this;
}
});
});
During the page load, a TypeError is thrown:
'Undefined' is not a function (evaluating 'this.$el.i18n()')
Any idea what I'm doing wrong here?
EDIT: require.config block in app.js (including shim):
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']
}
});