javascript - RactiveJS 国际化的良好实践(使用 RequireJS)

Question

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

现在我想支持多种语言(最初只有德语和英语)。

所以我的问题是:

在 RactiveJS 中实现国际化的最佳做法是什么？

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

<强>1。从模板中剥离所有文本，将它们放入资源文件中并通过查找方法传递它们。
缺点:
在类似 <div>The Item {{name}} is used <b>{{count}}</b> times.</div> 的情况下，要么将文本分开，留下无意义的 block ，要么破坏数据绑定(bind)

<强>2。重复模板
缺点:
• 重复的模板代码
• 无法弄清楚如何使用RequireJS-Optimizer 为模板构建单独的语言包。

<强>3。 ???
还有其他想法吗？

顺便说一句:没关系，当语言改变时重新加载整个应用程序。我更喜欢一种解决方案，其中只有当前所选语言的资源将通过 RequireJS 加载。

Answer 1

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

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

要生成翻译文件，您可以使用运行所有组件文件的 grunt/gulp/whatever 工具任务，解析它的 HTML 部分并查找带有 decorator="i18n" 的元素。 .然后，您可以从中生成 JSON 模板，并手动填写翻译。

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

然后您可以使用某种全局指示器来向装饰器模块发送要加载的翻译映射的信号。由于翻译可以随时更改，因此无法通过 RequireJS 静态加载。映射将需要通过 AJAX 向下或通过动态 require 完成称呼。无论哪种方式，优化器都不会包含翻译。

此外，在渲染过程中会产生一些开销，因为使用该装饰器渲染的每个组件都会即时更改文本。