templates - 使用 require.js、主干和下划线本地化模板

Question

这个问题是关于模板化和本地化，使用 require.js 和通过主干.js 下划线模板。应用程序需要即时本地化。

在走上一条后来证明有问题的道路之前，有没有比我正在考虑的更好的解决方案 - 我担心重复合并和处理语言数组的速度和内存。假设是 2-3 千个语言字符串。

当前方法(可行，但看起来处理器很重):

使用 I18N bundling approach ，创建语言“包含”，它将基本上包含所有模板的翻译元素

将这个对象/元素数组与模型属性(来自主干)合并，并将合并的批处理传递到下划线模板

.

define(['backbone', 'models/model', 'text!template.html', 'i18n!my/nls/translatedbits'],
  function(Backbone, MyModel, TemplateText, TranslationObject) {
  var View = Backbone.View.extend({
    model: {},

    initialize : function(params) {
      this.model = new MyModel();
    },

    render : function(callBack) {
      // Get the model attributes
      var templateParams = _.clone(this.model.attributes);
      // Bolt on the tranlsated elements (established from require.js I18N plugin)
      templateParams.t = TranslationObject;
      // Pass the lot ot the template
      var template = _.template(TemplateText, this.model.attributes);
      $(this.el).html( template );
      return this;
    }

  });
  return View;
  }
);

然后模板将读取

<%= modelAttribute1 %> <%= t.translationString1 %>

是否有更好的解决方案或更好的模板引擎？ [更适合这个目的 - mustache 可能还有其他优点，但它可以更容易地本地化，还是它可以缓存本地化结果以允许稍后传入模型属性？]

请注意，可能需要“即时”更改语言 - 这是我对 I18N 插件的另一个担忧。我最终可能会通过模板模型通过 JSON 请求获取转换，但这仍然需要对象的合并，这是我试图避免的。

Answer 1

这是我目前正在做的事情(只是开源的，因为它对其他人似乎有用)

underi18n是一个非常小的库，用于在模板和代码上执行 i18n。

它提供:

gettext 的简单转换目录为 json 格式。

支持翻译字符串中的变量替换。

它确实 不是 处理多元化。

从自述文件:

目录
under18n对目录使用简单的 JSON 格式，遵循标准 gettext格式。在以下示例中，

{
    'Developer': 'Προγραμματιστής',
    'Role ${role} does not exist in ${context}': 'Ο ρόλος ${role} δεν υπάρχει στο ${context}'
}

我们有两个翻译字符串，第二个有两个变量， role和 context .
提供了一个简单的python脚本来帮助您转换标准 .mo文件转换为此 JSON 格式。

用法

从 json i18n 目录创建 MessageFactory:

var t = underi18n.MessageFactory(catalog);

您现在可以内联翻译:

t('Developer') // returns "Προγραμματιστής"

t('Role ${role} does not exist in ${context}', {role: 'διαχειριστής', context: 'πρόγραμμα'})
// Returns "Ο ρόλος διαχειριστής δεν υπάρχει στο πρόγραμμα"

模板

通常，模板中的变量用一些分隔符表示。以 mustache 为例 {{ var }}使用而 <%= var %>下划线的默认值。我们使用相同的方法来表示可翻译的字符串。您可以将可翻译字符串的分隔符指定为正则表达式，以及您在 under18n.templateSettings 中选择的模板语言使用的左/右分隔符。 .默认情况下，这遵循下划线约定:

templateSettings: {
    translate: /<%_([\s\S]+?)%>/g,
    i18nVarLeftDel: '<%=',
    i18nVarRightDel: '%>'
}

所以， <%_ i18n %>设置为表示可翻译的字符串和 <%= var %>用于表示模板内的变量。

您可以通过调用 under18n.template 翻译模板，例如使用下划线，你可以做

var templ = _.template(under18n.template(myTemplate, t));

例子

给定以下目录、工厂和英语和希腊语模板，并假设一个下划线模板，

var test_en = {
        'files_label': 'Files',
        'num_files': 'There are ${num} files in this folder'
    },

    templ = '<h1><%= title %></h1>' +
            '<label><%_ files_label %></label>' +
            '<span><%_ num_files %></span>',

    t_en = underi18n.MessageFactory(test_en);
    t_el = underi18n.MessageFactory(test_el);

模板可以由以下方式构建，

var toRender = _.template(underi18n.template(templ, t_en));
toRender({title: 'Summary', num: 3});

会产生

<h1>Summary</h1>
<label>Files</label>
<span>There are 3 files in this folder</span>

AMD 加载

如果您使用 requireJS，under18n 将注册为匿名模块.

我希望这能解决你的问题，如果没有，请告诉我，我计划在某个阶段发布它，但是现在总比没有好；)