RactiveJS国际化的良好实践（使用RequireJS）

Question

我基于RactiveJS构建了一个Web应用程序。它使用RequireJS来处理模块和依赖项。 Ractive模板加载了rv。

现在我想支持多种语言（最初只支持德语和英语）。

所以我的问题是：

在RactiveJS中实现国际化的良好做法是什么？

到目前为止，我看到两个选项：

1。从模板中删除所有文本，将它们放在资源文件中，然后通过查找方法传递em。
缺点：
在<div>The Item {{name}} is used <b>{{count}}</b> times.</div>

之类的情况下，要么将文本分开，留下无意义的块，要么打破数据绑定

2。重复模板
缺点：
•重复的模板代码
•无法弄清楚如何使用RequireJS-Optimizer

为模板构建单独的语言包

第3。 ???
还有其他想法吗？

BTW：可以在语言发生变化时重新加载整个应用。我更喜欢一种解决方案，其中只有通过RequireJS加载当前所选语言的资源。

Answer 1

没有规范的方法可以做到这一点。但是，你可以通过使用装饰器来逃脱它。在<span>中换行文字，然后在<span>添加装饰器。装饰器的作用是获取<span>的内容，从准备好的映射中获取翻译，并替换该文本。

<div>
  <span decorator="i18n">Some random text to translate</span>
</div>

要生成翻译文件，您可以拥有遍历所有组件文件的grunt / gulp /任何工具任务，解析其中的HTML部分并查找decorator="i18n"的元素。然后，您可以从中生成JSON模板，并手动填写翻译。

{
  "Some random text to translate": "Alcuni testo casuale da tradurre",
  ...
}

然后，您可以使用某种全局指示符来指示装饰器模块要加载哪些转换映射。由于转换可以随时更改，因此无法通过RequireJS静态加载。映射需要通过动态require调用进行AJAX调用或完成。无论哪种方式，优化器都不会包含翻译。

此外，渲染时会有一些开销，因为使用该装饰器渲染的每个组件都会动态更改文本。

Answer 2

要解决1 + 2的问题，即在不重复所有模板的情况下保持模板的有意义，请考虑提供主要语言的文本（让我们说英语）为默认翻译功能。

基于this Ractive issue中的讨论，并由kurdin在this fiddle中进行了演示，您的模板可能如下所示：

<p>{{{ t('Hello <strong>{{name}}</strong> and have a nice day!', 'hello', {name: user.name}) }}}</p>

然后，您定义了一个专门处理默认值的翻译函数t。

Translations = []   // load those however you want
Translations["ru"] = {
       localization: 'пример локализации',
       hello: "Привет <strong>{{name}}</strong> хорошего тебе дня!",
       language: 'Язык: {{lang}} ',
       lang: 'Русский'
}

I18n.translations = Translations;
I18n.defaultLocale = "en";

function t(defaultText, name, context) {
    return (I18n.locale === I18n.defaultLocale) ? defaultText : I18n.t(name, context);
}

缺点是：

1. 不一致。默认语言在模板中是硬编码的，即您的默认语言与语言包的位置不同。
2. 开销：您可以加载两种语言的数据，因为默认值始终会加载到模板中。

要解决第一个问题，即一致性，您可能还想提供英语语言包，并跳过自定义t功能。