This commit is contained in:
krzysztofmadejski 2016-11-10 13:21:02 +00:00
parent 0a8994cf1c
commit 54e3824846
2 changed files with 90 additions and 1 deletions

View File

@ -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
<script type="text/javascript" src="recline.js"></script>
<script type="text/javascript">
this.recline.View.translations['en'] = {
Add_row: 'Add new row'
}
</script>
```

View File

@ -108,7 +108,7 @@ my.MultiView = Backbone.I18nView.extend({
</div> \
</div> \
<div class="recline-results-info"> \
{{#t.num_records}}<span class="doc-count">{recordCount}</span> records{{/t.num_records}}\
{{#t.num_records}}<span class="doc-count">{recordCount}</span> {recordCount, plural, =1{record} other{records}}{{/t.num_records}}\
</div> \
<div class="menu-right"> \
<div class="btn-group" data-toggle="buttons-checkbox"> \