Knockout.js用于在双语站点中切换语言

时间:2013-10-19 22:56:20

标签: javascript html knockout.js client-side

我正在尝试使用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>

非常感谢你对此事的帮助。

1 个答案:

答案 0 :(得分:0)

Chris - 你可以使用一种新的双语javascript解决方案 - 它非常容易使用 - 即插即用 - 只需用//分隔两个字符串即可。 languageone//languagetwo它将根据用户选择的语言为用户显示正确的一个。

它也适用于较大的文本块,使用以下格式:

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

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