diff --git a/docs/views.markdown b/docs/views.markdown index 762de79f..c1ade73a 100644 --- a/docs/views.markdown +++ b/docs/views.markdown @@ -105,3 +105,92 @@ of such behaviour see the DataExplorer view. See the existing Views. +## Internationalization + +### Adding translations to templates + +Internationalization is implemented with help of [intl-messageformat](https://www.npmjs.com/package/intl-messageformat) library and supports [ICU Message syntax](http://userguide.icu-project.org/formatparse/messages). + +Translation keys are using Mustache tags prefixed by `t.`. You can specify translated strings in two ways: + +1. Simple text with no variables is rendered using Mustache variable-tag +```javascript +$template = '{{ "{{t.Add_row"}}}}'; // will show "Add row" in defaultLocale (English) +``` + +2. Text with variables or special characters is rendered using Mustache section-tag + +```javascript +$template = '{{ "{{#t.desc"}}}}Add first_row field{{ "{{/t.desc"}}}}'; +// using special chars; will show "Add first_row field" in defaultLocale + +$template = '{{ "{{#t.num_records"}}}}{recordCount, plural, =0 {no records} =1{# record} other {# records}}{{ "{{/t.num_records"}}}}'; +// will show "no records", "1 record" or "x records" in defaultLocale (English) +``` + +When using section-tags in existing templates be sure to remove a bracket from variables inside sections: +```javascript +#template___notranslation = '{{ "{{recordCount"}}}} records'; +#template_withtranslation = '{{ "{{#t.num_records"}}}} {recordCount} records {{ "{{/t.num_records"}}}}'; +``` + + +Then to setup Backbone and Mustache to use translation you have to extend some objects: + +```javascript +// ============== BEFORE =================== + +my.MultiView = Backbone.View.extend({ + initialize: function(options) { + ...: + }, + render: function() { + var tmplData = this.model.toTemplateJSON(); + var output = Mustache.render(this.template, tmplData); + ... + } +}); + +var multiView = new recline.View.MultiView({ + model: dataset +}); + +// ============== AFTER ==================== + +my.MultiView = Backbone.I18nView.extend({ // extend I18n view + initialize: function(options) { + this.initializeI18n(options.locale); + ...: + }, + render: function() { + var tmplData = this.model.toTemplateJSON(); + tmplData = _.extend(tmplData, this.MustacheFormatter()); // inject Moustache formatter + var output = Mustache.render(this.template, tmplData); + ... + } +}); + +var multiView = new recline.View.MultiView({ + model: dataset, + locale: 'pl' // set Locale used +}); + +``` + + +### Adding new language + +Create a copy of `src/i18n/pl.js` and translate all the keys. Long English messages can be found in `en.js`. + +### Overriding defined messages + +If you want to override translations from provided locale do it in a script tag after including recline: + +```html + + +``` \ No newline at end of file diff --git a/src/view.multiview.js b/src/view.multiview.js index ce2cb8ab..9f0029b2 100644 --- a/src/view.multiview.js +++ b/src/view.multiview.js @@ -108,7 +108,7 @@ my.MultiView = Backbone.I18nView.extend({ \ \
\ - {{#t.num_records}}{recordCount} records{{/t.num_records}}\ + {{#t.num_records}}{recordCount} {recordCount, plural, =1{record} other{records}}{{/t.num_records}}\
\