JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src='http://cdn.ractivejs.org/latest/ractive.js'></script>

<ul id='container'></ul>

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

<script id='template' type='text/ractive'>
    {{#items}}
<input type='radio' name="plan"
    value="{{key}}" id="{{key}}"
    checked="{{ checked }}"
    class="{{ checked? 'is-checked' : '' }}"/>{{ key }}
{{/items}}
</script>

JavaScript

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

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