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上自动初始化（标记增强）。 <{1}}发生后，大多数小部件都会被初始化。

您只需要在pagecreate中包含 i18n 代码。

pagebeforecreate

<强> Demo

翻译JQuery Mobile小部件

1 个答案: