Internationalization 渲染器、下划线模板和i18next国际化

我们目前需要使用主干网、木偶和下划线模板为中型应用程序添加国际化

经过深入研究，出现了两种有效的选择：

• 它提供了与下划线的直接集成，但缺少多元化，这对于支持法语和英语以外的语言至关重要
• 它提供了一个强大的API，但仅与Handlebar模板直接集成

从长远来看，我们需要用更多的语言进行本地化（希望如此！），因此underi18n可能无法满足需求，唯一可行的解决方案就是i18next

在继续之前，我将概述我的两个问题，然后提供我所经历的全部背景和研究过程

如何使用i18next和Marionette集中化模板的本地化

如何将全局辅助对象插入到所有下划线模板中

集中模板的本地化 我发现i18n非常麻烦的一件事是，您必须在所有onRender函数中调用它，这意味着在几十个当前视图和所有未来视图中添加一个调用。在我看来，如果我错了，请纠正我，这看起来是这样的：

MyView = Marionette.ItemView.extend({

  template: myUnlocalizedTemplate,

  onRender: function () {
    /* ... some logic ... */
    this.$el.i18n();
  }
  /* And everything else... */
});

并被反复重复

从实现和维护的角度来看，我觉得这非常不方便，所以我开始深入研究主干网和木偶网，从过去的项目中，我记得有一些全局预处理模板的方法。
我偶然发现了木偶。渲染器，它似乎是适合这项工作的工具。 但在全面安装和实施i18next之前，我想确保我走的是正确的道路。
因为如果我能清楚地看到如何在i18n和

下使用.template（under18n.template（myTemplate，t））

可以很好地与渲染器集成，并为我提供一个全局解决方案来预处理和本地化我的模板，我不太确定在这种情况下使用i18next的方式。
事实上，我找不到任何人这样做的例子也让我担心，是每个人都使用把手模板还是在每个视图中手动调用

.i18n（）

？在这一点上，没有jquery元素可以绑定翻译，所以我很困惑这是怎么可能的

---

如果能提供我想要完成的事情的例子、进一步的文档或前进中的技巧，我将不胜感激

我终于找到了一个好办法。在这里，因为我希望它可以帮助其他人在这种情况下

/* Some initializer
 * ...
 */

// Init i18n and
// Start the app in the callback
$(function() { 
  i18n.init({
    function (t) {
      App.start();
    }
  });
});

// Following in the initialize:after
// We'll override the default Marionette.Renderer.render function
App.on('initialize:after', function() {
  overwriteRenderer();
});

function overwriteRenderer() {
  // Simply use a closure to close over the current render function
  var render = Marionette.Renderer.render;

  // Then override it
  Marionette.Renderer.render = function (template, data){

    // Extend data to inject our translate helper    
    data = _.extend(data, {_t: i18n.t});

    // And finally return the result of calling the original render function
    // With our injected helper
    return render(template, data);
  };
}


// Then in any template, simply use it as follow
// Do not forget the `=` to output the translation in the final DOM
<div>
  <%= _t("my_key", {options: "my options"} %>
</div>

允许您动态注入一个密钥，该密钥将被本地化，然后插入原始字符串中

---

希望它能帮助其他人。

如果您需要访问helpers中的view实例，请使用另一种解决方案：

// Global template helpers in Marionette
var _mixinTemplateHelpers = Marionette.View.prototype.mixinTemplateHelpers;
Marionette.View.prototype.mixinTemplateHelpers = function(target) {
    var _this = this;
    target = _.extend({
        // generate a unique id in the view's scope
        _id: function(baseName) {
            return _this.cid + '-' + baseName;
        },
    }, target);
    return _mixinTemplateHelpers.call(this, target);
};

<div>
  <%= _t("my_key", {option: myVar} %>
</div>

<div>
  <%= _t("my_key", {option: _t(myDynamicKey)} %>
</div>

msgid "my_translation_with_interpolation"
msgstr "My translation with __option__"

// Global template helpers in Marionette
var _mixinTemplateHelpers = Marionette.View.prototype.mixinTemplateHelpers;
Marionette.View.prototype.mixinTemplateHelpers = function(target) {
    var _this = this;
    target = _.extend({
        // generate a unique id in the view's scope
        _id: function(baseName) {
            return _this.cid + '-' + baseName;
        },
    }, target);
    return _mixinTemplateHelpers.call(this, target);
};