javascript - 翻译 JQuery Mobile 小部件

Question

使用i18next ，如何翻译 JQuery Mobile 小部件？具体来说，我想知道如何在不使用 data-i18n-target 修改生成的内部元素的情况下做到这一点，因为这很脆弱，因为 future 的小部件版本可能会更改生成的代码。

是否有我可以订阅的特定页面生命周期事件，以便能够在小部件转换发生之前让 i18next 修改 DOM？

在此示例中(请参阅 jsfiddle )，某些标记已正确翻译，但 homeBtn 和 submitBtn 未正确翻译:

HTML:

<div id="home_page" data-role="page">
    <div data-role="header">
        <a id="homeBtn" href="/" data-icon="home" data-i18n>app.home</a>
        <h2 data-i18n>app.title</h2>
    </div>
    <div data-role="content">
        <div data-role="fieldcontain">
            <label for="textinput1" data-i18n>app.label</label>
            <input type="text" name="textinput1" id="textinput1" value=""></input>
        </div>
        <form action="">
            <input id="submitBtn" type="submit" data-i18n="[value]app.button" />
        </form>
    </div>
    <div data-role="footer">
        <center>
            <p data-i18n>app.footer</p>
        </center>
    </div>
</div>

JavaScript:

var i18nOpts = {
    resStore: {
        dev: {
            translation: {
                app: {
                    button: 'Button',
                    home: 'Home',
                    label: 'Label',
                    footer: 'Footer',
                    title: 'i18n Test'
                }
            }
        },
    }
};
i18n.init(i18nOpts).done(function() {
    $("html").i18n();
});

Answer 1

jQuery Mobile 小部件会在 pagebeforecreate 和 pagecreate 两个事件上自动初始化(标记增强)。一旦 pagecreate 发生，大多数小部件就会被初始化。

您所需要的只是将i18n代码包装在pagebeforecreate中。

$(document).on("pagebeforecreate", function () {
  // code
});

Demo