Question

我一直试图解决i18next按钮翻译问题一段时间了。如果我从page1移动到page2然后再移到page1，按钮渲染会中断：无论如何，在从page1移动到第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>

Answer 1

确保i18Net init仅运行一次。 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

您也可以只在主页的页面创建中运行它：

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

或者不将它应用于整个$（＆＃34; html＆＃34;）。

Jquery移动按钮和i18next翻译

1 个答案: