JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.ractivejs.org/0.5.8/ractive.js"></script>
<p>Check the console. All results should be 'true'</p>

<div id='one'></div>
<div id='two'></div>

<script id='template-one' type='text/ractive'>
    <div decorator='check:div'>
        <box>
            <p decorator='check:p'>some content</p>
        </box>
    </div>
</script>

<script id='template-two' type='text/ractive'>
    <box>
        <p decorator='check:p'>some content</p>
    </box>
</script>

<script id='box' type='text/ractive'>
    <div decorator='check:box' style='border: 1px solid black;'>
        {{yield}}
    </div>
</script>

CSS

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

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

.error {
    color: #d00;
    font-family: monospace;
}

JavaScript

Ractive.decorators.check = function ( node, id ) {
    console.log( id, document.contains(node) );
            
    return {
        teardown: function () {}
    };
};

Ractive.components.box = Ractive.extend({
    template: '#box'
});

console.group( 'one' );
var ractive = new Ractive({
    el: 'one',
    template: '#template-one'
});
console.groupEnd();

console.group( 'two' );
var ractive = new Ractive({
    el: 'two',
    template: '#template-two'
});
console.groupEnd();