JSFiddle - React, Tailwind, and code Playground

by Yogesh Rathod

HTML

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script id="modele" type="text/ractive">
    <h2>Test Ractive boutons radio</h2>
    <div id="choix">
       <button on-click="setCouleur('red')" id="rouge">Rouge !</button>
       <button on-click="setCouleur('green')" id="vert">Vert !</button>
       <button on-click="setCouleur('blue')" id="bleu">Bleu !</button>
    </div>
    
{{#each liste:i}}
<h3>Liste {{i+1}}</h3>
<div id="radioset{{i}}">
   <input type="radio" name="{{couleur}}" id="red{{i}}" value="red">
   <label for="red{{i}}">Rouge</label>
   <input type="radio" name="{{couleur}}" id="green{{i}}" value="green">
   <label for="green{{i}}">Vert</label>
   <input type="radio" name="{{couleur}}" id="blue{{i}}" value="blue">
   <label for="blue{{i}}">Bleu</label>
   &nbsp; =&gt; couleur <span style="color: {{couleur}};">{{couleur}}</span>
</div>
{{/each}}
</script>



<div id="emplacement"></div>

JavaScript

Ractive.DEBUG = false;

var objet_couleurs = [
    {'couleur': 'red'}, {'couleur': 'green'}, {'couleur': 'blue'}, ];
var ract = null;

$(document).ready(function () {
    ract = new Ractive({
        el: 'emplacement',
        template: '#modele',
        data: {
            liste: objet_couleurs
        },
        oninit: function(){
            this.observe('liste.*.couleur', function (n, o, k, i) {
                var radio = this.$buttonset.eq(i)
                radio.buttonset('refresh');
            }, { init: false, defer: true});
        },
        onrender: function(){
            $('button').button();
            this.$buttonset = $('div[id^=radioset]').buttonset();
        },
        setCouleur: function(color){
            this.set('liste.*.couleur', color);
        }
    });

});