Question

我想在＆＃34;开始＆＃34;点击时更改按钮的标签。到＆＃34;重启＆＃34;。我的应用程序将以多种语言提供，我正在使用L10n.js库。按钮的标签可以有两个值（＆＃34;开始＆＃34;和＃34;重新启动＆＃34;）），在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>

加载页面后，将显示正确的按钮（和段落）值。 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>

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

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

1 个答案: