JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

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

<pre id='error'></pre>

<script id='template' type='text/ractive'>
    <p>object.foo: {{object.foo}}</p>
    <p>string: {{string}}</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;
}

#error {
    color: #d00;
}

JavaScript

// bit weird to use Ractive as a data source, but it's
// convenient for the demo
var dataSource = new Ractive({
    data: {
        object: {
            foo: 'bar'
        },
        string: 'abcdef'
    }
});

ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: dataSource.get()
});

// Model -> view change
dataSource.on( 'change', function ( changes ) {
    setting = true; // prevent infinite loop
    ractive.set( changes );
    setting = false;
});

// View -> model change
ractive.on( 'change', function ( changes ) {
    if ( setting ) return;
    dataSource.set( changes );
});

// This is fine, because we're setting a scalar
// value, so the change only bounces once
dataSource.set( 'string', 'ghijkl' );

// This isn't fine! Objects are always treated
// as being unequal to other objects, even
// themselves
try {
    dataSource.set( 'object', { foo: 'baz' });
} catch ( err ) {
    error.textContent = err.message;
}