Marionette.Renderer,Underscore模板和i18next的国际化

Question

我们目前需要使用Backbone.Marionette和下划线模板为中型应用添加国际化.

经过一番深入研究后,出现了两个有效的选择:

• underi18n提供与下划线的直接集成,但缺乏多元化,这对于支持法语和英语更为重要
• i18next提供强大的API,但只与手柄模板 直接集成

我们需要在更长的时间内本地化更多的语言(希望如此!)因此,underi18n可能会达不到,唯一可行的解​​决方案就是i18next.

在进一步讨论之前,我将概述我的两个问题,然后提供我所经历的完整背景和研究过程.

1. 如何使用i18next和Marionette集中模板的本地化
2. 如何在所有下划线模板中注入全局帮助器

集中模板的本地化

我发现i18n非常麻烦的一件事是你必须在你所有的onRender功能中调用它,这意味着在我们的几十个当前视图和我们未来的所有视图中添加一个调用.在我看来,纠正我,如果我弄错了,这将是这样的:

MyView = Marionette.ItemView.extend({

  template: myUnlocalizedTemplate,

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

并反复重复.

从实施和维护的角度来看,我觉得这很不方便,所以我开始深入研究Backbone和Marionette,记得从过去的项目中有一些全局预处理模板的方法.
我偶然发现了Marionette.Renderer,它似乎是这项工作的正确工具.但在进入i18next的完整安装和实现之前,我想确保我走在正确的道路上.
因为如果我可以清楚地看到如何underi18n并_.template(under18n.template(myTemplate, t));可能与渲染器以及集成和提供给我一个全球性的解决方案,预处理和本地化我的模板,我不那么肯定去与i18next在这种情况下的方式.
事实上我找不到任何人这样做的例子也让我担心,每个人都要使用车把模板还是.i18n()在每个视图中手动调用？在这一点上,没有jquery元素可以绑定翻译,所以我很困惑这可能是怎么回事.

将是一个非常赞赏的答案,提供我想要完成的一个例子,进一步的文档或途中的提示!

Answer 1

我终于找到了一个很好的方法.在这里,我希望它可以在这种情况下帮助其他人.

/* 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>

如图所示,我将其作为视图助手将translate函数注入到所有模板中.这个解决方案很好,很干净,因为它将大部分翻译委托给模板,我相信它应该是.它既不需要修改任何视图,也不会大幅限制在现有项目上完成本地化所需的更改量.

一个简洁的细节也是你可以在插值中注入变量,意思是这样的:

<div>
  <%= myVar %>
</div>

可以变成这样的东西,用于插值

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

甚至

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

并在po文件中

msgid "my_translation_with_interpolation"
msgstr "My translation with __option__"

允许您动态注入一个键,该键将被本地化,然后在原始字符串中进行插值.

希望它可以帮助别人.