Knockout-Localization-Binding
Knockout-Localization-Binding copied to clipboard
Knockout Localization Binding
Simplifies working with localization sites by dynamically getting text from a resource/copy document.
Resources
The resource file is just a json document with keys, locales and texts. It must be stored in a global variable called resources.
var resources = {
ok: {
default: 'OK'
},
name: {
sv: 'Namn',
en: 'Name'
},
email: {
sv: 'E-post',
en: 'E-mail'
},
welcome: {
sv: 'Hej <strong>#name</strong>! Du bor i #city.',
en: 'Hello <strong>#name</strong>! You live in #city.'
}
};
If a text is the same for many languages it can be defined as 'default' instead of a locale. Text can contain placeholders for texts that is populated at runtime from an observable.
Locale
The current locale must be stored in a global variable called locale.
Markup
There are localized bindings for:
- restext
- reshtml
- resattr
- reshref (sugar for attr: { href: url })
- ressrc (sugar for attr: { src: url })
Internally these bindings get the localized text and then uses Knockouts default binding like text, html and attr.
Basic usage
This example get a localized text with the key email. Depending on what the locale variable is set to, it will say E-post or E-mail.
<span data-bind="restext: 'email'"></span>
This example uses parameters to fill in the placeholders.
<span data-bind="reshtml: { key: 'welcome', params: { name: name, city: city } }"></span>
The values name and city are observables on your view model.