如何使用Handlebars.js(小胡子模板)制作i18n？

Question

我目前正在使用Handlebars.js(与Backbone和jQuery相关联)来制作一个几乎完全由客户端渲染的Web应用程序,而且我对此应用程序的国际化存在问题.

我怎样才能做到这一点？

有插件吗？

Answer 1

我知道这已经得到了解答,但我想分享我的简单解决方案.为了使用I18n.js(我们在工作中使用我们的项目时)使用Gazler的解决方案,我只使用了一个非常简单的Handlebars帮助程序来促进进程即时进行本地化:

处理器

Handlebars.registerHelper('I18n',
  function(str){
    return (I18n != undefined ? I18n.t(str) : str);
  }
);

模板

<script id="my_template" type="x-handlebars-template">
    <div>{{I18n myVar}}</div>
</script>

这样做的主要优点是整个json对象上没有昂贵的前/后处理.更不用说传入的json是否具有嵌套的对象/数组,如果对象很大,花在寻找和解析它们上的时间可能会变得昂贵.

干杯!

Answer 2

https://github.com/fnando/i18n-js是一个ruby gem,它将从config/locales文件夹创建一个国际化文件.但是,如果您不使用rails,则可以在此处找到自己使用的javascript .

然后,您只需将翻译存储在嵌套对象中.

I18n.translations = {"en":{"date":{"formats":{"default":"%Y-%m-%d","short":"%b %d","long":"%B %d, %Y"}}}};

我在项目中使用的对你来说也有用的东西是小胡子补丁,它以@@ translation_key @@格式自动翻译字符串.

i18nize = function (result) {
    if (I18n) {
      var toBeTranslated = result.match(/@@([^@]*)@@/gm);
      if (!toBeTranslated) return result;
      for(var i = 0; i < toBeTranslated.length; i++) {
        result = result.replace(toBeTranslated[i], I18n.t(toBeTranslated[i].replace(/@/g, "")));
      }
    }
    return result;
};

然后在渲染后调用i18nize ,允许您将翻译放在模板中而不是传递它们.

小心修补胡子,因为您将无法将模板移植到标准胡子实现. 但就我而言,提供的好处超过了这个问题.

希望这可以帮助.