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

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

我怎样才能做这个工作?

有没有插件?

我知道这已经得到了答复,但我想分享我的简单解决scheme。 为了在Gazler的解决scheme上使用I18n.js(我们在工作中使用这个工具),我只是使用了一个非常简单的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嵌套了对象/数组,那么查找和parsing它们的时间可能会变得很昂贵,如果对象很大。

干杯!

https://github.com/fnando/i18n-js是一个rubygem,将从您的config / locales文件夹创build一个国际化文件。 但是如果你不使用rails,你可以在这里find自己使用的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,以便将翻译放在模板中而不是传递给它们。

注意修补胡须,因为你将无法将你的模板移植到标准的胡须实现上。 但就我而言,所提供的好处超过了这个问题。

希望这可以帮助。

根据@poweratom的回答:

只有使用ember.js ,与传递给I18n.js的选项一样。

如果使用计算的属性,它会奇迹般地重新加载。

 Ember.Handlebars.helper "t", (str, options) -> if I18n? then I18n.t(str, options.hash) else str 

模板:

 {{t 'sharings.index.title' count=length}} 

阳明:

 en: sharings: index: title: To listen (%{count}) 

使用NodeJs / Express

  • nginx代理configuration

     server { listen 80; server_name fr.domain.com; client_max_body_size 20m; proxy_set_header Accept-Language fr location / { proxy_pass http://127.0.0.1:3000; proxy_set_header Host $host; proxy_buffering off; } } 
  • node-i18n (检测Accept-Language头)

      app.use(i18n.init); 
  • 示例翻译文件

     { "hello": "hello", "home-page": { "home": "Home", "signup": "Sign Up" } } 
  • 在Express控制器中

     ... data.tr = req.__('home-page'); var template = Handlebars.compile(source); var result = template(data); 
  • 把手模板

      <li class="active"><a href="/">{{tr.home}}</a></li> 

对于那些不使用任何JS框架http://i18next.com看起来也很有希望;

只需创build句柄助手来调用像http://i18next.com/pages/doc_templates.html这样的翻译;

这个问题是回答,但他们可能是一个情况下,你不想依赖于任何i8n库和完全使用自己的。 我使用我自己的启发https://gist.github.com/tracend/3261055