2014-06-13 21 views
7

Tôi đã triển khai i18next và sau khi nhận được trợ giúp về một số vấn đề, tất cả đều hoạt động tốt. Tôi vẫn gặp sự cố khi hiểu các phần của tài liệu trên trang web hỗ trợ.Thay thế các biến trong i18next

Tôi đang cố gắng để tái tạo phần này (tìm thấy here):

// given resources 
{   
    'en-US': { translation: { key: '__myVar__ are important' } } 
}; 

i18n.t("key", { myVar: "variables" }); // -> variables are important 

Về phía tôi của sự vật, đây là tệp JSON:

{ 
    "app": {"name": "mytranslation" }, 
    "back": "Back", 
    "cancel": "Cancel", 
    "closemenu": "Close Menu", 
    "closeoptions": "Close options", 
    "currency": "Currency symbol is __currencysymbol__", 
    "date": "Date", 
    "description": "Description" 
} 

Và HTML:

<body> 
    <div data-i18n="currency"></div> 
    <script src="javascript/i18next-1.7.3.min.js"></script> 
    <script language="javascript" type="text/javascript"> 
     i18n.init({ preload: ['en', 'fr', 'ht', 'es', 'de', 'zh', 'vi', 'pt', 'it', 'th', 'dev'] }); 
     i18n.init({ detectLngQS: 'lang' }); 
     i18n.init(function(t) { 
      $("body").i18n(); 
      var appName = t("app.name"); 
     }); 
     i18n.t("currency", { currencysymbol: "$" }); //where do I place this code??? 
    </script> 
</body> 

Lưu ý: jQuery 2.1.1 và jQuery Mobile 1.4.2 được tải trong tiêu đề.

Tôi chắc chắn rằng tôi không đặt các bộ phận khác nhau nơi chúng được cho là đi, vì nó không hoạt động (không chèn biến "currencysymbol"). Phần còn lại của mã hoạt động tốt, khi tôi nhận được tất cả văn bản đã dịch. Điều tôi thực sự muốn đạt được là có thể tạo các biến được gọi là một phần của bản dịch (ký hiệu tiền tệ, tên công ty, địa chỉ công ty, v.v ... - cho mục đích liên kết), và có thể thay thế các giá trị đó khi chúng được lặp lại trong các văn bản đã dịch.

Tôi muốn có các biến đó ở một nơi, vì vậy chúng dễ điều chỉnh và chúng sẽ không phụ thuộc vào bối cảnh thay đổi ngôn ngữ.

Trả lời

8

Để i18next để suy biến khi gọi phương thức i18n() chống lại một phần của DOM, bạn phải:

  • thiết lập các tùy chọn useDataAttrOptions lúc init
  • cung cấp các giá trị của các biến của bạn trong data-i18n-options thuộc tính của phần tử mục tiêu

dụ HTML của bạn sẽ trở thành:

<body> 
    <div data-i18n="currency" 
     data-i18n-options='{"currencysymbol": "$"}'></div> 
    <script src="javascript/i18next-1.7.3.min.js"></script> 
    <script language="javascript" type="text/javascript"> 
     i18n.init({ 
      preload: ['en', 'fr', 'ht', 'es', 'de', 'zh', 'vi', 'pt', 'it', 'th', 'dev'], 
      detectLngQS: 'lang', 
      useDataAttrOptions: true 
     }, function(t) { 
      $("body").i18n(); 
      var appName = t("app.name"); 
     }); 
    </script> 
</body> 

Lưu ý: Các tùy chọn là đối tượng JSON, do đó việc trích dẫn thích hợp là điều cần thiết. Trong đoạn mã trên, giá trị của thuộc tính data-i18n-options được viết giữa các trích dẫn đơn giản để có thể đọc được. Nhưng như một vấn đề của hương vị, tiện lợi, hoặc khổ dâm, bạn có thể lựa chọn một trong những điều sau đây, cũng tùy chọn HTML hợp lệ:

  • không thể viện chứng: data-i18n-options={"currencysymbol":"$"}
  • dụng dấu ngoặc kép với các thực thể HTML: data-i18n-options="{&quot;currencysymbol&quot;: &quot;$&quot;}"
  • đôi -quyền với các thực thể số: data-i18n-options="{&#34;currencysymbol&#34;: &#34;$&#34;}"
Các vấn đề liên quan