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

Question

Im rokiee使用Jsrender，我想知道哪种翻译模板的最佳方式

我有这样的模板：

_welcome.tmpl.html:

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

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

welcome.json:

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

直到这里，工作正常。

所以，现在我想翻译一下＆＃34;你好＆＃34;和＃34;欢迎来到＆＃34;用不同的语言。但我的系统真的很丑陋而效率低下。

我有不同的文件，我加载取决于＆＃34; lang＆＃34;属性。例如 郎=＆＃34; EN＆＃34;即将加载：

english_vars.js

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

如果lang =＆＃34; es＆＃34;即将加载：

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

Answer 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

中