1

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

1 回答 1

1

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

您只需将i18n代码包装在pagebeforecreate.

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

演示

于 2013-12-12T16:26:42.197 回答