翻译 JQuery Mobile 小部件

Question

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

我是否可以订阅特定的页面生命周期事件，以便能够在小部件转换发生之前让 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