JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<div id='container'></div>

<script id='myTemplate' type='text/ractive'>
    {{#columns:i}}
        <p>{{ format.type || 'Not Defined' }}</p>
        <p>{{ columns[i].format.type || 'Not Defined' }}</p>
    {{/columns}}
    
    {{#currency}}
        <p>{{ type || 'Not Defined' }}</p>
    {{/currency}}
    
    <p>{{ currency.type || 'Not Defined' }}</p>
</script>

JavaScript

var currency = {};
currency.type = "currency";

var columns = [
    { format: currency }
];

var data = {
        "columns": columns,
        "currency": currency
    };

ractive = new Ractive({
    el: 'container',
    template: '#myTemplate',
    data: data,
    magic: true
});

ractive.set( 'columns.0.format.type', 'duck duck duck' );
ractive.set( 'currency.type', 'money money money' );

//different than:
//ractive.set( 'currency.type', 'money money money' );
//ractive.set( 'columns.0.format.type', 'duck duck duck' );
//last man wins!
//(but what is the DOM bound to?)

console.log(data.columns[0].format.type)
console.log(data.currency.type)