JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<script id='main' type='text/ractive'>
    <project project = "{{project}}" > </project>
</script>
<script id='project' type='text/ractive'>
    <div class="project" > 
        {{#project}}
        Components: 
        <ul> 
            {{#components}}
            <li on-click="select" class="component {{#(.name===project.current.name)}}selected">{{name}}</li>
            {{/components}}
        </ul>
        {{/project}}
    </div>
</script>
<div id="container1" />

CSS

.selected {
    color: green;
}
li {
    cursor: pointer;
}

JavaScript

var hello = {
    "name": "hello",
        "assets": {}
},
items = {
    "name": "items",
        "assets": {}
}
var data = {
    project: {
        components: [hello, items],
        current: hello
    }
}
Ractive.components.project = Ractive.extend({
    template: '#project',
    magic: true,
    complete: function () {
        var r = this,
            project = r.data.project
            this.on('select', function (e) {
                if(e.context===project.current) {return}
                console.log('project select fired')
                //project.current = e.context
                r.set('project.current', e.context)
            })
            r.observe('project.current', function (newV, old) {
                console.log('project.current changed from',
                old ? old.name : '<none>', 'to',
                newV ? newV.name : '<none>')
            })
    }
})
var ractive = new Ractive({
    el: 'container1',
    //magic: true,
    template: '#main',
    data: data,
})