How to use i18next? Problems with translations

前端未结

关注

 2  1838

I want to use a internationalization option at my jQuery Mobile and jQuery webside. I tried to generate an example with the documentation on http://i18next.com but it seems

相关标签:

2条回答

别那么骄傲

2020-12-29 06:03

    <!DOCTYPE html>
    <html>

    <head>
        <title>Basic Sample Usage</title>

        <script src="js/jquery.js" type="text/javascript"></script>   
        <script src="js/i18next.js" type="text/javascript"></script>  
    </head>

    <body>

        <h3> you can switch lng via ?setLng='lngTag' </h3>
        <a id="en" href="?setLng=en"> en </a>
            | &nbsp;
        <a id="de" href="?setLng=de"> de </a>  

        <h3>loaded via attribute 'data-i18n' and $('.nav').i18n();</h3>

        <h5>basic text</h5>
        <ul class="nav">
            <li class="active"><a href="#" id = "navy" data-i18n="nav.home"></a></li>
            <li><a href="#" data-i18n="nav.1"></a></li>
            <li><a href="#" data-i18n="nav.2"></a></li>
        </ul>

        <button id="btn" data-i18n="ns.common:add"></button>

        <h5>extended usage of 'data-i18n' - apply to other attributes</h5>
        <div id="extendedAttr">
            <input data-i18n="[placeholder]ns.common:attr.placeholder;" type="text"></input>
            <button data-i18n="[title]ns.common:attr.title;btn.hoverMe;"></button>
        </div>

        <script>

        $.i18n.init({
            //lng: 'en',
            ns: { namespaces: ['ns.common', 'ns.special'], defaultNs: 'ns.special'},
            useLocalStorage: false,
            debug: true
        }, function(t) {

            //$('#navy').i18n(); for single 
            $('.nav').i18n();  // for group
            $('#btn').i18n();
            $('#extendedAttr').i18n();
        });



        </script>

    </body>

    </html>


locales/en/ns.special.json <=> make same for de/ns.speacial.json
{
    "nav": {
        "home": "en home",
        "1": "en  link 1",
        "2": " en link 2"
    }, 
    "btn": {
        "hoverMe": "en hover me!"
    }
}

and locales/de/ns.common.json <=> make same for en/ns.speacial.json
{
    "app": {
        "company": {
          "name": "my company"
        }
    },
    "attr": {
        "placeholder": "de translated placeholder",
        "title": "translated title" 
    },
    "add": "de add"
}

0 讨论(0)

旧巷少年郎

2020-12-29 06:20
Main problem is you can't call i18n.t("menu.surname", { defaultValue: "Name:"}); directly after initialization, as loading the resources from server is async, so basically you try to translate before i18next fetched the resources.

Instead load it with callback:
```
$(document).ready(function(){
  language_complete = navigator.language.split("-");
  language = (language_complete[0]);
  console.log("Sprache (root): %s", language);

  i18n.init({ lng: language, debug: true }, function() {
      // save to use translation function as resources are fetched
      $(".menu").i18n();
      $("headline").i18n();
  });
});
```
or use flag to load resources synchron.

By the way: Your html code has one closing </div> too many.

The call to $("headline").i18n(); should be $("#headline").i18n();.
0 讨论(0)
发布评论:

提交评论
- 加载中...