JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<script src="http://www.anothervision.com/js/i18n.js"></script>
<div id='app'></div>

<script id='template' type='text/ractive'>
    <h1>Ractive.js - {{ i18n.t('localization') }}</h1>
    
    <!-- with partials, data-binding continues to work -->
    <input value='{{user.name}}'/>
    
    <p>{{{ i18n.t('hello', {name: user.name}) }}}</p>
    <p>{{ i18n.t('language', {lang: i18n.t('lang') }) }}</p>
    <input type='radio' name='{{lang}}' value='en'>Eng
    <input type='radio' name='{{lang}}' value='ru'>Rus
    
</script>

JavaScript

var Translations = {};

Translations["en"] = {
      localization: 'localization example',
      hello : 'Hello <strong>{{name}}</strong> and have a nice day!',
      language: 'Language: {{lang}}',
      lang: 'English' 
}

 Translations["ru"] = {
       localization: 'пример локализации',
       hello: "Привет <strong>{{name}}</strong> хорошего тебе дня!",
       language: 'Язык: {{lang}} ',
       lang: 'Русский'
}
 
I18n.translations = Translations;
I18n.defaultLocale = "en";

model = {
      lang: 'en',
      user: {
        name: 'Sergey',
      },
      i18n: I18n
};

App = new Ractive({
    el: '#app',
    template: '#template',
    data: model
});

App.observe('lang', function(lang) {
    I18n.locale = lang;
    App.update('i18n'); 

});