2011-11-08 34 views
17

Có vẻ như Twitter đang sử dụng một số fork của Mustache.js để cung cấp i18n cho các mẫu của nó?Làm cách nào để nâng cấp i18n bằng Mustache.js?

Ai đó có thể đưa ra một ví dụ ngắn gọn về cách thực hiện điều này và có lẽ cũng phác thảo ngữ nghĩa nào là cần thiết để crowdsource các bản dịch này?

Có tất nhiên ví dụ đơn giản này:

var template = "{{_i}}{{name}} is using mustache.js!{{/i}}" 

var view = { 
    name: "Matt" 
}; 

var translationTable = { 
    // Welsh, according to Google Translate 
    "{{name}} is using mustache.js!": "Mae {{name}} yn defnyddio mustache.js!" 
}; 

function _(text) { 
    return translationTable[text] || text; 
} 

alert(Mustache.to_html(template, view)); 
// alerts "Mae Matt yn defnyddio mustache.js!" 

Nhưng tôi muốn một số cái nhìn sâu sắc hơn về cách cấu trúc _ chức năng (văn bản) và translationTable để cung cấp điều kiện, số ít, số nhiều, vv Ví dụ về giải quyết các trường hợp sử dụng nâng cao hơn sẽ được nhiều người đánh giá cao.

+1

Tôi đã ấn tượng rằng twitter sử dụng [hogan.js] (http://twitter.github.com/hogan.js/) cho ria mép khuôn mẫu. Nếu đó là trường hợp, sau đó câu trả lời của martin dưới đây có vẻ giống như một gợi ý tốt. –

Trả lời

5

Cấu trúc các trường hợp nâng cao hơn bao gồm điều kiện, vòng lặp, v.v. được thực hiện theo cùng một cách chính xác như với thư viện Mustache thông thường. Bạn có thể sử dụng thẻ kết thúc I18N {{_i}} mới và {{/ i}} để bọc các phần mẫu của bạn cho mục đích dịch thuật.

Nếu bạn template là:

<h1>Title: {{title}}</h1> 
<ul> 
    {{#a_list}} 
     <li>{{label}}</li> 
    {{/a_list}} 
</ul> 

bạn chỉ có thể quấn dòng đầu tiên

<h1>{{_i}}Title: {{title}}{{/i}}</h1> 

và bao gồm các phần bên trong bản đồ dịch.

Xem http://jsfiddle.net/ZsqYG/2/ để có ví dụ hoàn chỉnh.

6

Tôi biết tôi không trả lời câu hỏi của bạn thực sự, nhưng trừ khi bạn đang có kế hoạch chi tiêu rất nhiều thời gian cho dự án này tôi nghiêm túc xem xét chỉ để lại điều này như là một vấn đề dữ liệu.

{ 
    title : { 
     key: 'título', 
     value: 'bienvenida' 
    } 
} 

Và:

{ 
    title : { 
     key: 'لقب', 
     value: 'ترحيب' 
    } 
} 

Sau đó chỉ cần làm cho lớp tổng quát:

<h1>{{title.key}}: {{title.value}}</h1> 

Và:

<h1>{{title.value}} {{title.key}}</h1> 

Tất cả bạn cần phải duy trì là 1: lập bản đồ 1 giữa các mẫu và dữ liệu.

Mustache.render(data[language], template[language]); 

Giữ nó đơn giản :)

0

Tôi tin vào những gì bạn muốn làm là sử dụng tính năng i18n với Moustache. Điều này có thể đạt được bằng cách quá tải phương thức Mustache.render như sau:

var lang = { 
    'is_using_pre': 'Mae ', 
    'is_using': 'yn defnyddio' 
}; 

var Mustache = (function (Mustache) { 
    var _render = Mustache.render; 

    Mustache.render = function (template, view, partials) { 
     view['lang'] = lang; 
     return _render (template, view, partials); 
    }; 

    return Mustache; 
}(Mustache)); 

var template = "{{_i}}{{lang.is_using_pre}}{{name}} {{lang.is_using}} mustache.js!{{/i}}"; 
var view = { 
    name: "Matt" 
}; 

alert(Mustache.to_html(template, view)); 
Các vấn đề liên quan