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

Question

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

我使用Polymer和自定义Web组件，因此主要目标是为任何本地化案例创建一个函数。 如果我尝试document.l10n.get(string);，我会TypeError: document.l10n.get is not a function。

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

Answer 1

由于document.l10n是L20n的View类的实例，因此您可以将formatValue和formatValues方法用于您的用例。有关详细信息，请参阅documentation。

这两种方法都会返回promises，因此您需要执行以下操作：

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

您可以分配到textContent或innerHTML。请记住，L20n允许翻译中的HTML，并且只在使用声明性data-l10n-id方法时对它们进行清理。因此，如果您想手动分配到innerHTML，您可能希望确保您信任翻译的内容。在将来，我想添加一个特殊的API，使用与声明性方法相同的清理工具将转换应用于DOM元素（bug 1228021）。