Jquery mobile button and i18next translations

问题

I have been trying to solve i18next button translation problem for a while now. The button rendering breaks if I move from page1 to page2 then to page1: is there anyway to stop the button on page1 from breaking after moving from page1 to page 2 then page1

Below is the markup used :

<!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>

回答1:

Make sure the i18Net init only runs once. pagebeforecreate runs for each page as it is navigated to. You could do it like this:

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

Here is a DEMO

You could also only run it on the pagecreate of the home page:

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

Or not apply it to the whole $("html").

来源：https://stackoverflow.com/questions/21402826/jquery-mobile-button-and-i18next-translations

标签

javascript

jquery

jquery-mobile

i18next