JSFiddle - React, Tailwind, and code Playground

by liyuankui

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<main></main>

<script id='combined' type='text/ractive'>
    <dropdown-list options='{{options}}' value='{{selected}}'/>
    <logger message='Current selection is {{selected}}'/>
</script>

<script id='dropdown-list' type='text-ractive'>
    <select value='{{value}}'>
        {{#options}}
        <option>{{this}}</option>
        {{/options}}
    </select>
</script>

<script id='logger' type='text-ractive'>
    <p>{{message}}</p>
</script>

CSS

body {
    font-family: 'Helvetica Neue', arial, sans-serif;
    font-weight: 200;
    color: #353535;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 200;
}

JavaScript

var DropdownList = Ractive.extend({ template: '#dropdown-list' });
var Logger = Ractive.extend({ template: '#logger' });

// can register them globally...
Ractive.components['dropdown-list'] = DropdownList;
Ractive.components['logger'] = Logger;

// ...or per-component
var Combined = Ractive.extend({
    template: '#combined',
    components: {
        'dropdown-list': DropdownList,
        'logger': Logger
    }
});

var ractive = new Combined({
    el: 'main',
    data: { options: [ 'a', 'b', 'c', 'd' ], selected: 'b' }
});