我目前正在使用Handlebars.js(与Backbone和jQuery相关)来制作几乎完全客户端渲染的Web应用程序,而且我遇到了此应用程序国际化的问题。如何用Handlebars.js(小胡子模板)制作i18n?
我该如何做这项工作?
有没有插件?
我目前正在使用Handlebars.js(与Backbone和jQuery相关)来制作几乎完全客户端渲染的Web应用程序,而且我遇到了此应用程序国际化的问题。如何用Handlebars.js(小胡子模板)制作i18n?
我该如何做这项工作?
有没有插件?
我知道这已被回答,但我想分享我的简单解决方案。要建立使用I18n.js(这是我们与我们的工作项目中使用)Gazler的解决方案,我只是用了一个很简单的把手帮助促进这一进程做对飞本地化:
处理器
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嵌套了对象/数组,那么如果对象很大,花在寻找和解析它们上的时间可能会变得很昂贵。
干杯!基于@poweratom的回答
我比较喜欢这个解决方案@Gazler的 –
尼斯解决方案。我做了这一个https://gist.github.com/1589125。但@ poweratom的一个似乎更清洁。 –
我得到这个错误:'TypeError:I18n.t不是一个函数'。任何建议? – slackmart
https://github.com/fnando/i18n-js是一个红宝石宝石,它将从您的config/locales文件夹创建一个国际化文件。但是,如果您不使用导轨,则可以在其自己的here上找到使用的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 后渲染让你把译文在你的模板,而不是将其穿过的。
小心修补小胡子,因为您将无法将模板移植到标准小胡子实现。但在我的情况下,所提供的好处超过了这个问题。
希望这会有所帮助。
这真的很棒,我完全错过了我可以用我的一个函数“重新解析”模板的事实,这正是我想要做的,也许是用R.js或其他东西。 非常感谢你=) – mdcarter
:
只有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})
对于那些不使用任何JS框架http://i18next.com看起来很有希望太
刚刚创建车把助手打电话给喜欢这里http://i18next.com/pages/doc_templates.html翻译
随着的NodeJS /快速:
nginx的代理配置
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"
}
}
在高速控制器
...
data.tr = req.__('home-page');
var template = Handlebars.compile(source);
var result = template(data);
把手模板
<li class="active"><a href="/">{{tr.home}}</a></li>
的问题的答案,但他们可能是,你不想依赖任何i8n的情况下, lib并完全使用你自己的。我使用我自己的灵感https://gist.github.com/tracend/3261055
你可以使用http://i18next.com for i18n->自带手柄助手:http://i18next.com/pages/doc_templates.html – jamuhl