JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<body>
</body>
CSS
body {
font-family: 'Helvetica Neue', arial, sans-serif;
font-weight: 200;
color: #353535;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 200;
}
JavaScript
Ractive.components.tpl = Ractive.extend({
template: '{{#init}}{{>tpl}}{{/init}}',
init: function () {
this.observe(this.data.key, function (tpl) {
this.set('init', false);
this.partials.tpl = tpl;
this.set('init', true);
});
}
});
// example
ractive = new Ractive({
el: document.body,
template: '<tpl key="tplA" /><tpl key="tplB" />',
data: {
tplA: 'Hello, <b>{{text}}</b>!',
tplB: 'Goodbye, <b>{{text}}</b>!',
text: 'World'
}
});
// example dynamic updates
setTimeout(function () { ractive.set('tplA', 'Hello, <b>{{text}}</b>!!!!!?!'); }, 1000);
setTimeout(function () { ractive.set('text', 'Ractive'); }, 2000);