1

我在让 i18next 正确初始化并提取适当的翻译字符串时遇到了一些问题。有几个库：

  • 电话间隙 3.x
  • 骨干网.js
  • 需要.js
  • i18next.js
  • 车把.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();
    });

不幸的是，代码甚至没有达到我设置的 document.ready 断点。相反，router.js 定义首先调用 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 块（包括垫片）：

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']
}
});
4

2 回答 2

2

我创建了一个使用 i18n 与 Backbone 和 require.js 的演示应用程序。您可以从github 存储库下载代码。

根据您分享的日志，我觉得您使用的是普通的 i18next.js，在 jQuery 之前下载 i18next 时会出现问题。看看这个问题。

而是下载 AMD 版本，特别是 jQuery 版本。这是链接。请注意，此版本不包含 jQuery，它只是引入了对它的依赖。

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

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

}

于 2014-04-13T13:52:04.683 回答
0

对于那些将来遇到这个问题的人，我可以使用 Manish 的示例和其他一些调整来让事情正常进行。有几个问题要记住：

  1. 确保您的初始化顺序正确。使用 i18next 的类需要将它们的初始化推迟到 i18next.init 调用返回之后。

  2. 检查您的 translations.json 文件中是否存在格式错误的 json。如果您使用的是 i18next.js 的未压缩版本， i18next有时会告诉您有问题，但您最好使用http://jsonlint.com/之类的东西来验证没有任何问题json。

  3. 变量替换是……在 i18next 中很有趣。使用双下划线和tr车把助手来做到这一点。

希望不是一个无耻的插件——如果你需要一个部件如何组合在一起的例子，我的项目仓库在这里：https ://github.com/adapt-it/adapt-it-mobile 。对本地化很重要的文件包括：

  • www/app.js（需要 i18next.js 的管道，调用 i18next.init）
  • www/router.js（模板化 html 的车把助手）
  • www/tpl 目录（车把模板，包括一些带有变量替换的模板）
  • www/locales 目录（本地化文件）
于 2014-05-06T16:21:46.417 回答