L20n.js:本地化动态创建的字符串

Question

在我的应用程序中，我可以通过标记来本地化大部分字符串，正如l20n.js文档中所描述的那样。但有时我必须本地化动态创建的字符串。喜欢：document.getElementById(id).innerHTML = "some text";

我使用聚合物和自定义web组件，所以主要目标是为任何本地化案例创建一个功能。如果我尝试document.l10n.get(string);，我就会得到TypeError: document.l10n.get is not a function。

做这件事最好的方法是什么？无法在官方文档中找到解决方案。

Answer 1

因为document.l10n是L20n的View类的一个实例，所以您可以使用formatValue和formatValues方法作为用例。详情请参阅文档。

这两个方法都返回承诺，因此您需要执行如下操作：

document.l10n.formatValue('hello', { who: 'world' }).then(
  hello => document.getElementById(id).textContent = hello
);

您可以分配给textContent或innerHTML。请记住，L20n允许在翻译中使用data-l10n-id，并且它只在使用声明式data-l10n-id方法时对它们进行消毒。因此，如果您想手动分配给innerHTML，您可能需要确保您信任翻译的内容。将来，我想添加一个特殊的API，使用与声明性方法(bug 1228021)相同的清除方法将翻译应用到DOM元素。