2013-10-19 25 views
0

我正在嘗試使用knockout.js來使我的網站成爲雙語。我將擁有用戶可以點擊切換語言的典型標誌。Knockout.js在雙語網站中切換語言

我使用knockout.js的實現是這樣的:https://github.com/tfsjohan/Knockout-Localization-Binding

我已經修改了它不少,因爲原來是矯枉過正,我需要的東西。

我想要做的是設置一組單選按鈕的演示,我可以用它來模擬切換語言。當我點擊一個按鈕時,我希望文本更改爲我選擇的語言。

這裏是我的JS:

var resources = { 
pLangSelect: { 
    en: 'Select your language:', 
    es: 'Selecciona tu idioma:' 
}, 
welcome: { 
    en: 'Hello <strong>Christopher</strong>! You live in London.', 
    es: 'Hola, ¡<strong>Cristóbal</strong>! Vives en Bogotá.' 
} 
}; 

這裏是我的HTML:

<!DOCTYPE html> 

<html> 
<head> 
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
<title>Knockout Localization Binding Demo</title> 
</head> 
<body> 
<div> 
    <div data-bind="restext: 'pLangSelect'"></div> 
    <labal for="eng">English</labal> 
    <input type="radio" id="eng" name="lang-select"> 
    <labal for="eng">Español</labal> 
<input type="radio" id="esp" name="lang-select"> 
<div data-bind="reshtml: { key: 'welcome' }"></div> 
</div> 

<script src="resources.js"></script> 
<script src="knockout-2.3.0.js"></script> 
<script src="../src/ko.localizationbinding.js"></script> 
<script> 
    var choice = document.getElementById('esp'); 
    var locale; 

    if (choice.selected) { 
     locale="en"; 
    } else { 
     locale="es"; 
    } 

    choice.onclick = function(e) { 
     if(choice.checked) 
      locale = 'en'; 
     else 
      locale = 'es'; 
    } 

    var vm = { 
    name: ko.observable(), 
    city: ko.observable() 
    }; 

    ko.applyBindings(vm); 
</script> 
</body> 
</html> 

非常感謝這件事的幫助。

+0

什麼是您的具體問題?順便說一句,如果我這樣做,我只是爲每種語言使用單獨的模板,並在'template'綁定中帶一個變量'name'選項。 – ebohlman

+0

如果您希望在更改語言環境時更新視圖,則需要將其更改爲可觀察,Knockout-Localization-Binding庫最能夠在其綁定中使用它 – Anders

回答

0

Chris - 您可以使用一種全新的雙語javascript解決方案 - 它非常易於使用 - 即插即用 - 只需將兩個字符串與//分隔開,例如, languageone//languagetwo,它會根據用戶選擇的語言爲用戶顯示正確的一個。

它適用於較大的文本塊也使用以下格式:

[[languageone 
languageone 
languageone///languagetwo 
languagetwo 
languagetwo]] 

www.affiliatewebdesigners.com/product/bilingual-javascript/