Cách sử dụng i18next? Các vấn đề với bản dịch

Tôi muốn sử dụng tùy chọn quốc tế hóa tại trang web jQuery Mobile và jQuery của tôi. Tôi đã cố gắng tạo một ví dụ với tài liệu trên http://i18next.com nhưng có vẻ như tôi đã thất bại. Có ai có kinh nghiệm với i18next không?Cách sử dụng i18next? Các vấn đề với bản dịch

Ở đây ví dụ của tôi:

index.html:

<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 
    <script src="jquery-mobile/jquery-1.6.4.min.js"  type="text/javascript"></script> 
    <script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script> 
    <script src="js/i18next-1.5.6.min.js"     type="text/javascript"></script> 
    <script src="js/translation.js"      type="text/javascript"></script> 
    </head> 
    <body> 
    <div data-role="page" id="page"> 
    <div data-role="content"> 
     <div id="headline1" data-i18n="headline"></div> 
     <table width="100%" border="0" id="menu1" class="menu"> 
      <tr id="surname"> 
      <td width="50%" data-i18n="menu.surname"></td> 
      <td width="50%">&nbsp;</td> 
      </tr> 
      <tr id="firstName"> 
      <td width="50%" data-i18n="menu.firstName"></td> 
      <td width="50%">&nbsp;</td> 
      </tr> 
     </table> 
     </div> 
    </div> 
    </body> 
</html>

file dịch: /locales/de/translation.json

{ 
    "menu": { 
    "surname": "Name:", 
    "firstName": "Vorname:" 
    }, 

    "headline": "Daten:", 
    "headline_1": "Daten Allgemein:", 
    "headline_2": "Daten Speziell:" 
}

/locales/en/translation.json

/locales/dev/translation.json

{ 
    "menu": { 
    "surname": "Name:", 
    "firstName": "First Name:" 
    }, 

    "headline": "Data:", 
    "headline_1": "Daten Common:", 
    "headline_2": "Daten Specific:" 
}

/js/translation.js

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

    i18n.init({ lng: language }); 
    i18n.init({ debug: true }); 
    $(".menu").i18n(); 
    $("headline").i18n(); 
});

Bản dịch cho menu tôi nhận được "menu.name" thay vì dự kiến "Name:". Đối với dòng tiêu đề tôi không nhận được bản dịch nào nhưng tôi dự kiến là "Dữ liệu:" hoặc "Dữ liệu:".

Nếu tôi thử gọi trực tiếp sau đây, tôi không nhận được bản dịch: i18n.t ("menu.surname", {defaultValue: "Name:"});

Có ai biết vấn đề là gì không? Hay không ai có một ví dụ làm việc phù hợp với những gì tôi cố gắng làm?

Nguồn

2012-10-22 Thomas

Vấn đề chính là bạn không thể gọi trực tiếp i18n.t("menu.surname", { defaultValue: "Name:"}); sau khi khởi tạo vì tải tài nguyên từ máy chủ không đồng bộ, do đó về cơ bản bạn cố gắng dịch trước khi i18next tìm nạp tài nguyên.

Thay vào đó tải nó với 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(); 
    }); 
});

hoặc sử dụng cờ để tải các tài nguyên synchron.

Nhân tiện: Mã html của bạn có một đóng </div> quá nhiều.

Cuộc gọi đến $("headline").i18n(); phải là $("#headline").i18n();.

Nguồn

2012-10-22 07:43:09 jamuhl

Nếu điều này giải quyết được vấn đề của bạn, bạn có thể đánh dấu câu trả lời này là đã trả lời. Vì vậy, câu hỏi được đóng lại. – jamuhl

Một câu hỏi nữa: Nếu tôi có văn bản dịch có nguyên âm đột biến (umlaut) thì tôi chỉ nhận được " ". Nếu tôi sử dụng ký hiệu HTML (ví dụ: "ä"), tôi thấy ký pháp HTML chứ không phải nguyên âm bị biến đổi. Tôi đang làm gì sai? Cảm ơn vì sự giúp đỡ. – Thomas

khẳng định mã hóa trên trang và trong json là utf8. – jamuhl

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

Nguồn

2015-08-14 06:59:45 gnganpath

Để biết chi tiết: https://github.com/i18next/i18next – gnganpath

Đối với i18n với việc triển khai backbone.js, hãy tham khảo liên kết dưới đây với require.js https://github.com/manishcm/i18n-backbone – gnganpath

Cách sử dụng i18next? Các vấn đề với bản dịch

Trả lời

Các vấn đề liên quan