2011-11-08 20 views
17

看來Twitter正在使用Mustache.jsfork提供國際化其模板?如何用Mustache.js進行高級i18n?

可能有人給的如何做到這一點,或許還概述了語義需要什麼,分工處理這些翻譯一個簡單的例子?

當然有這個簡單的例子:

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

但我想就如何構建_(文本)功能和translationTable提供條件句的單數,複數等例子更深入的瞭解解決更先進的使用案例將非常感激。

+1

我是Twitter使用的印象[hogan.js](http://twitter.github.com/hogan.js/)根據小鬍子模板。如果是這樣,那麼馬丁的答案似乎是一個很好的建議。 –

回答

5

構建更先進的情況下,包括條件,循環等以完全相同的方式與常規鬍子庫完成。您可以使用新的I18N {{_i}}開始和{{/ i}}結束標記來包裝部分模板以進行翻譯。

如果模板是:

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

你可以包住第一線

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

,包括在翻譯映射表的內部。

http://jsfiddle.net/ZsqYG/2/一個完整的例子。

6

我知道我不回答你的問題真的,但除非你在這個項目上花了很多時間準備我會認真考慮就要離開這個作爲一個數據的問題。

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

和:

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

接下來,只要模板通用:

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

和:

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

所有你需要的維護是一個1:1的映射模板和數據之間。

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

保持簡單:)

0

我相信你想做的事就是用國際化的特徵與鬍鬚。這可以通過重載Mustache.render方法如下來實現:

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)); 
相關問題