更改 data-l10n-id 属性时，innerhtml 值不会更改

Question

我想将单击按钮的标签从“开始”更改为“重新启动”。我的应用程序将以多种语言提供，为此我正在使用 L10n.js 库。按钮的标签可以有 2 个值（“Start”和“Restart”））定义如下 app.properties:

    start = Start
    restart = Restart
    text = this is some text
    another-text = this is another text

按钮定义如下（使用按钮构建块）：

    <body>
        <p id="sometext" data-l10n-id="text"></p>
        <section data-type="sidebar" role="region" class="skin-dark">
                <section style="margin-bottom: 30px">
                    <button id="startbutton" class = "recommend" data-l10n-id="start">Start</button>
                </section>
            </div>
        </section>

  </body>

加载页面后，将显示正确的按钮（和段落）值。 data-l10n-id 属性和相应的值应在单击时更改：

    document.getElementById("startbutton").addEventListener("click", function( event ) {
        this.setAttribute("data-l10n-id", "restart");
        document.getElementById("sometext").setAttribute("data-l10n-id", "another-text");
    });

正在查看 DOM 属性已更改但未更改应显示的值：

    <p id="sometext" data-l10n-id="another-text">this is some text</p>
    <section data-type="sidebar" role="region" class="skin-dark">
        <section style="margin-bottom: 30px">
            <button id="startbutton" class="recommend" data-l10n-id="restart">Start</button>
        </section>          
    </section>

我做错了什么吗？欢迎任何评论！谢谢。

Answer 1

这里有一个使用 l10n.js 的演示应用程序：https://github.com/tuxor1337/fxos-l10n-demo

请注意 HTML 文档的 <head> 部分包含有关可用语言环境的信息：

<link rel="localization" href="locales/testing.{locale}.properties" />
<meta name="availableLanguages" content="en-US" />

此外，我们不仅包括 l10n.js，还包括 JavaScript 的 Promise 的垫片，因为 l10n.js 需要它，但它不是 Firefox 的一部分 OS 1.3:

<script src="es6-promise.js" defer></script>
<script src="l10n.js" defer></script>
<script src="app.js" defer></script>

我使用 Firefox OS 模拟器成功测试了 1.3 和 2.0 版的代码。请注意，l10n.js 的实现略有不同。我使用了 gaia 中使用的 Mozilla 实现：https://github.com/mozilla-b2g/gaia/blob/master/shared/js/l10n.js

更改 data-l10n-id 属性时，innerhtml 值不会更改

innerhtml value does not change when data-l10n-id attribute is changed

firefox-os