i18next-ko
Version:
KnockoutJS bindings for i18next.
71 lines (61 loc) • 2.2 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>i18next-ko Demo</title>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
<script src="../lib/i18next-ko.bundle.js"></script>
</head>
<body>
<h1 data-bind="i18n: { 'html': 'title' }"></h1>
<p>
<span data-bind="i18n: 'text'"></span><br/>
<select data-bind="value: language">
<option value="en">English</option>
<option value="de">Deutsch</option>
</select>
</p>
<p>
<input type="text" data-bind="textInput: name"/><br/>
<span data-bind="i18n: { key: 'greet', options: { name: name } }"></span>
</p>
<p>
<button data-bind="i18n: { 'html': 'dummyButton', 'title': { key: 'dummyButtonFor', options: { name: name } } }"></button>
</p>
<p data-bind="text: translatedVariable"></p>
<script language="javascript">
i18nextko.init({
'en': {
'translation': {
'title': 'i18next-ko Example',
'text': 'This is an example for i18next-ko. Please select a language:',
'greet': 'Hello, __name__!',
'dummyButton': 'Pointless button',
'dummyButtonFor': 'Your very own pointless button, __name__!',
'translatedVariable': 'This is a computed observable, that is updated on language changes.'
}
},
'de': {
'translation': {
'title': 'i18next-ko Beispiel',
'text': 'Dies ist ein Beispiel für i18next-ko. Wählen Sie eine Sprache:',
'greet': 'Hallo, __name__!',
'dummyButton': 'Sinnloser Knopf',
'dummyButtonFor': 'Dein ganz persönlicher sinnloser Knopf, __name__!',
'translatedVariable': 'Dies ist ein computed observable, der sich beim Sprachwechsel aktualisiert.'
}
}
}, 'en', ko);
function ExampleViewModel () {
var self = this;
self.language = ko.observable('en');
self.language.subscribe(function (value) {
i18nextko.setLanguage(value);
})
self.name = ko.observable('Jon Doe');
self.translatedVariable = i18nextko.t('translatedVariable');
}
ko.applyBindings(new ExampleViewModel());
</script>
</body>
</html>