Question

我遇到一些问题，让i18next正确初始化并提取相应的翻译字符串。混合中有一些库：

PhoneGap 3.x
Backbone.js的
Require.js
i18next.js
handlebars.js

我的app.js对于document.ready函数有以下内容：

$(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();
    });

不幸的是，代码甚至没有达到我设置的文件.ready breakpoint。相反，router.js define首先在View类中调用初始化代码：

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;
    }
  });
});

在页面加载期间，抛出TypeError：

'Undefined' is not a function (evaluating 'this.$el.i18n()')

知道我在这里做错了吗？

编辑：app.js中的require.config块（包括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']
}
});

Answer 1

我在使用带有Backbone和require.js的i18n时创建了一个演示应用程序。您可以从github repository下载代码。

根据您分享的日志，我觉得您使用的是正常的i18next.js，在jQuery之前下载i18next时会遇到问题。看看这个issue。

而是专门下载AMD版本的jQuery版本。这是link。请注意，此版本不包含jQuery，它只是引入了对它的依赖。

添加jQuery并从垫片配置中删除i18next：

shim: {
'handlebars': {
    exports: 'Handlebars'
},
'backbone': {
    deps: ['underscore', 'jquery'],
    exports: 'Backbone'
},
'underscore': {
    exports: '_'
},
'jquery': {
    exports: '$'
}

}

Answer 2

对于那些在将来遇到这个问题的人，我能够使用Manish的例子和其他一些调整来解决问题。要记住一些问题：

确保初始化顺序正确。使用i18next的类需要在i18next.init调用返回之前保持初始化。
检查translations.json文件中格式错误的json。如果您使用未压缩版本的i18next.js，i18next 有时会告诉您有什么问题，但您最好使用{{3}之类的东西验证json没有任何问题。
变量替换在i18next中很有意思。使用双下划线和 tr 把手助手来完成它。

希望不是一个无耻的插件 - 如果你需要一个部件如何组合在一起的例子，我的项目回购就在这里：http://jsonlint.com/。对本地化很重要的文件包括：

www / app.js（i18next.js的require.js管道，致电i18next.init）
www / router.js（模板化html的把手助手）
www / tpl目录（把手模板，包括一些带有可变替换的模板）
www / locales目录（本地化文件）

加载i18next初始化的顺序

2 个答案: