使用 i18next 和车把进行变量替换答案

【问题标题】：Variable replacement with i18next and handlebars使用 i18next 和车把进行变量替换
【发布时间】：2014-05-02 20:56:26
【问题描述】：

我终于让我的 PhoneGap / Backbone / Handlebars 使用 i18next.js 进行本地化——有点。

我目前想知道如何获取带有嵌入式车把表达式的 html 以同时本地化和用 Handlebars 编译。例如，我想要这样的东西：

Welcome, {{this.name}}. We've been expecting you.

变成：

Welcome, Bob. We've been expecting you.

无需本地化，这很容易。但是运行文档中描述的 i18next 模板（此处：http://i18next.com/pages/doc_templates.html）...

// handlebars helper from i18next
Handlebars.registerHelper('t', function(i18n_key) {
  var result = i18n.t(i18n_key);
  return new Handlebars.SafeString(result);
});

//Handlebars string:
{{t 'view.WelcomeMessage'}}

// translation.json file
{ "view":
    {
        "WelcomeMessage": "Welcome, {{this.name}}. We've been expecting you."
    }
}

不幸的是，本地化后会变成以下内容：

Welcome, {{this.name}}. We've been expecting you.

如何使字符串本地化并编译嵌入式表达式？

【问题讨论】：

标签： handlebars.js i18next

【解决方案1】：

看起来这个问题的答案在变量替换助手中tr：

// handlebars helper from i18next
Handlebars.registerHelper('tr', function(context, options) { 
  var opts = i18n.functions.extend(options.hash, context);
  if (options.fn) opts.defaultValue = options.fn(context);
  var result = i18n.t(opts.key, opts);
  return new Handlebars.SafeString(result);
});

// random "This" object passed in:
var person = {name:"Bob", age:42, eyeColor:"blue"};

//Handlebars string:
{{tr this key='view.WelcomeMessage'}}

// translation.json file
{ "view":
  {
    "WelcomeMessage": "Welcome, __name__. We've been expecting you."
  }
}

// Output
Welcome, Bob. We've been expecting you.

请注意，http://i18next.com/pages/doc_templates.html 上给出的 tr 示例末尾确实有一个额外的参数。仅当您想用其他东西替换 this 属性之一时才需要这样做。

【讨论】：

我不明白 __name__ 是如何被替换的。助手调用不应该是：{{tr key='view.WelcomeMessage' name=this.name}} ?
@gentiane：看起来我也没有。 tr 助手查看通过this 参数传入的对象，并提取出适当的属性值。您可以通过在最后传递另一个值来覆盖它们，但如果您的对象具有用于变量替换的属性，则没有必要。我通过添加带有name 属性的“this”对象来更新我的答案。

【解决方案2】：

对于 i18next v3.2.0，它有 interpolation:

package.json |依赖项/开发依赖项

"i18next": "^3.1.0",
"babel-core": "^6.7.2",
"babel-loader": "^6.2.4",
"handlebars": "^4.0.2",
"handlebars-loader": "^1.1.4",
"webpack": "^1.12.2",

layoutView.js |传递给模板的模型数据示例：

  render(){
    let person = {name: 'joe', age: 21};
        person = new Backbone.Model(person);
    this.$el.html(template(person.toJSON()));
  }

layoutView.hbs |车把模板

<div>{{{ i18n 'person' name=this.name age=this.age}}}</div>
<!-- after interpolation will read -->
<!-- <div>joe is 21 lang: en </div> -->

i18n.js |使用es2015所以文件名变成了layoutView.hbs中使用的helperName（上图）

// handlebars helper from i18next
import i18next from 'i18next';
import Handlebars from 'handlebars';

export default function(key, options) {
 let result = i18next.t(key, options.hash);
 return new Handlebars.SafeString(result);
};

翻译.json |插值样本

{
  "person": "{{name}} is {{age}} lang: en",
  "good-bye": "good-bye: en",
  "other": "other: en"
}

github上的这个帖子真的helped

【讨论】：