JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script id="component" type='text/template'>
    <div>Component: <input value="{{val}}"></div>
</script>
<script id="template" type='text/template'>
    <ul>
    {{#items:i}}
        <li on-click='select'>{{name}}</li>
    {{/}}
    </ul>
    <hr/>
    {{#items[ cur_item ]}}
        <input value="{{name}}">
        <br/>
        <Component val="{{name}}"/>
    {{/}}
</script>

<div id="container">
</div>

JavaScript

Ractive.components.Component = Ractive.extend({
    template: '#component'
});
var app = new Ractive({
    el: '#container',
    template: '#template',
    data: {
        cur_item: 0,
        items: [{ name: 'item 0' }, { name: 'item 1' }, { name: 'item 2' }]
   }
});
app.on({
    select: function (ev) {
        this.set('cur_item', ev.index.i);
    }
});