JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<ul id='container'></ul>

<button id='switch'>Update</button>

<script id='template' type='text/ractive'>
    {{#items}}
<input type='radio' name="{{ selected }}"
    value="{{this}}" id="{{key}}"
    class="{{ selected === this ? 'is-checked' : '' }}"/>{{ key }} {{ selected === this }}
{{/items}}
        
 {{JSON.stringify(selected)}}
</script>

JavaScript

var view  = new Ractive({
      el: 'container',
      template: '#template',
      data: {
          items: [
          {key: 'a'},
          {key: 'b'},
          {key: 'c'}
           ]
      }
});

view.observe('items', function(n,o,k){
    if(n===o) { return }
    console.log('observe', n[0])
    view.set('selected', n[0])  
})


$('#switch').click(function() {
    view.set( 'items', [
          {key: 'd'},
          {key: 'e'},
          {key: 'f'}
        ]);
})