Jquery 移动按钮和 i18next 翻译答案

【问题标题】：Jquery mobile button and i18next translationsJquery 移动按钮和 i18next 翻译
【发布时间】：2014-02-19 14:07:00
【问题描述】：

我一直在尝试解决 i18next 按钮翻译问题。如果我从 page1 移动到 page2 再到 page1，按钮渲染会中断：从第1页移动到第2页然后第1页后，是否有阻止第1页上的按钮中断

以下是使用的标记：

<!DOCTYPE html>
<html>
<head>
    <title>Mbank</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"/>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/vendor/i18next/i18next-1.7.1.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

</head>
<body>
<div id="home_page" data-role="page">
    <div data-role="header"><a href="/" data-icon="home" data-i18n>app.home</a>

        <h2 data-i18n>app.title</h2>

    </div>
    <div data-role="content">

        <a href="#home_page2" id="index-conatact" data-role="button" data-i18n data-corners="false" data-icon="grid">app.page2</a>
    </div>

    <div data-role="footer">
        <center>
            <p data-i18n>app.footer</p>
        </center>
    </div>
</div>

<div id="home_page2" data-role="page">
    <div data-role="header"><a href="/" data-icon="home" data-i18n>app.home</a>

        <h2 data-i18n>app.title</h2>

    </div>
    <div data-role="content">

        <a href="#home_page" id="index-conatactwws" data-role="button" data-i18n data-corners="false" data-icon="grid">app.page1</a>
    </div>

    <div data-role="footer">
        <center>
            <p data-i18n>app.footer</p>
        </center>
    </div>
</div>

<script>
    $(document).on("pagebeforecreate", function () {
        console.log(' sample pagebeforecreate');
        var i18nOpts = {
            resStore: {
                dev: {
                    translation: {
                        app: {
                            button: 'Button i18',
                            home: 'Home i18',
                            label: 'Label i18',
                            footer: 'Footer i18',
                            title: 'i18n Translation!',
                            li: 'Read-only',
                            lilink: 'Linked item',
                            col: 'Collapsible',
                            page1: 'to page 1', page2: 'to page 2',
                            colContent: 'Lorem ipsum dolor sit amet.'

                        }
                    }
                }

            }
        };

        i18n.init(i18nOpts).done(function () {
            $("html").i18n();
        });
    });
</script>
</body>
</html>

【问题讨论】：

代替 pagebeforecreate 尝试 pagebeforeshow。
试过了，它不起作用，根据 JQM 文档（api.jquerymobile.com/1.3/pagebeforecreate），您有以下内容：“请注意，通过绑定到 pagebeforecreate，您可以在 jQuery Mobile 的默认小部件自动之前操作标记- 初始化。例如，假设您想通过 JavaScript 添加数据属性，而不是在 HTML 源中，这就是您要使用的事件。所以我觉得 pagebeforecreate 是最好的地方
好的，我现在明白这个问题了。请参阅我的答案以进行修复...

标签： javascript jquery jquery-mobile i18next

【解决方案1】：

确保 i18Net 初始化只运行一次。 pagebeforecreate 在每个页面被导航到时运行。你可以这样做：

var i18nOpts = {
    resStore: {
        dev: {
            translation: {
                app: {
                    button: 'Button i18',
                    home: 'Home i18',
                    label: 'Label i18',
                    footer: 'Footer i18',
                    title: 'i18n Translation!',
                    li: 'Read-only',
                    lilink: 'Linked item',
                    col: 'Collapsible',
                    page1: 'to page 1', page2: 'to page 2',
                    colContent: 'Lorem ipsum dolor sit amet.'
                }
            }
        }
    }
};
var IsInit = false;

$(document).on("pagebeforecreate", function () {
    if (!IsInit){
        i18n.init(i18nOpts).done(function () {
            $("html").i18n();
            IsInit = true;
        });
    }
});

这是一个DEMO

你也可以只在首页的pagecreate上运行：

$(document).on("pagebeforecreate", "#home_page", function () {
    i18n.init(i18nOpts).done(function () {
        $("html").i18n();
        IsInit = true;
    });
});

或者不将其应用于整个 $("html")。

【讨论】：

谢谢 Ezanker 你认为同样的事情也适用于单页吗？
对于单个页面，您可能应该在每个页面加载时对其进行初始化。