翻译JQuery Mobile小部件 [英] Translate JQuery Mobile widgets

问题描述

使用 i18next ，如何翻译JQuery Mobile小部件?具体来说，我想知道如何做到这一点，而不求助于使用data-i18n-target来修改生成的内部元素，因为这很脆弱，因为将来的小部件版本可能会更改生成的代码.

Using i18next, how can I translate JQuery Mobile widgets? Specifically, I'd like to know how to do that without resorting to using data-i18n-target to modify generated inner elements, because that is brittle since future widget versions may change the generated code.

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

Is there a specific page lifecycle event I can subscribe to in order to be able to have i18next modify the DOM before the widget transformation happens?

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

In this example (see jsfiddle), some markup is correctly translated, but homeBtn and submitBtn are not:

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:

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();
});

推荐答案

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

jQuery Mobile widgets are auto-initialized (Markup enhancement) on two events, pagebeforecreate and pagecreate. The majority of widgets are initialized once pagecreate occurs.

您需要做的就是将 i18n 代码包装在pagebeforecreate中.

All you need is to wrap i18n code in pagebeforecreate.

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

演示

Demo

这篇关于翻译JQuery Mobile小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！