JsRender - 如何翻译模板？（最佳实践）答案

【问题标题】：JsRender - How to Translate templates? (Best Practices)JsRender - 如何翻译模板？（最佳实践）
【发布时间】：2016-07-02 14:50:46
【问题描述】：

我是使用 Jsrender 的新手，我想知道翻译我的模板的最佳方式

我有这样的模板：

_welcome.tmpl.html:

<div> Hello, {{:name}}</div>
<div> welcome to {{:place}}</div>

我从这样的文件中读取 daat：

welcome.json:

{
  "name": "David"
  "place": "wien"
}

到这里为止，一切正常。

所以，现在我想将“你好”和“欢迎来到”这两个词翻译成不同的语言。但是我的系统真的很丑而且效率很低。

我加载不同的文件取决于“lang”属性。例如 lang="EN" 我要加载：

english_vars.js

var t_hello = "Hello";
var t_msg = "Welcome to";

如果 lang="es" 我要加载：

spanish_vars.js
    var t_hello = "Hola";
    var t_msg = "Bienvenido a";

然后我的模板看起来像这样：

var wellcomeTemplate = `
<div>`+t_hello+`, {{:name}}</div>
<div>`+t_msg+` {{:place}}</div>`

有什么方法可以改进这个模板引擎的翻译？

注意：翻译不得与 DATA 使用相同的 .json 文件

【问题讨论】：

标签： javascript jsrender

【解决方案1】：

如果您的本地化字典是 JSON 或 JavaScript 对象（哈希）：

var terms = {
  hello: "Hola",
  welcome: "Bienvenido a"
};

然后您可以将术语与数据分开传递，作为辅助变量：

<script id="tmpl" type="text/x-jsrender">
  <div>{{:~hello}}, {{:name}}</div>
  <div>{{:~welcome}} {{:place}}</div>
</script>

像这样：

var data = {
  name: "John",
  place: "Madrid"
};

var html = $.templates("#tmpl").render(data, terms);

当您更改语言时，请输入适当的本地化术语。

见http://www.jsviews.com/#helpers

另一种可能性是为每种语言翻译模板，使用 JsRender 本身进行翻译。只需更改翻译步骤的分隔符，因此您只翻译术语，而不更改其他标签：

<script id="baseTmpl" type="text/x-jsrender">
  <div><%:hello%>, {{:name}}</div>
  <div><%:welcome%> {{:place}}</div>
</script>

然后：

$.views.settings.delimiters("<%", "%>");

var localizedTemplate = $.templates("#baseTmpl").render(terms);

$.views.settings.delimiters("{{", "}}");

var html = $.templates(localizedTemplate).render(data);

见http://www.jsviews.com/#settings/delimiters

这两种方法都显示在this jsfiddle

【讨论】：