JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<script type="text/template" id="template">

	<fillVariable name="testouter">
		{{testouter}}

		<fillVariable name="test">
		<doSomething test="{{testouter}}"/>
		</fillVariable>
	</fillVariable>

</script>

Should be "this is testouter":<br/>
<div id="content"></div>

JavaScript

Ractive.components.fillVariable = Ractive.extend({
    template: '{{>content}}',
    beforeInit: function(options) {
        options.data[options.data.name] = "this is "+options.data.name;
    }
});
Ractive.components.doSomething = Ractive.extend({
    beforeInit: function(options) {
        delete options.data.test;
    }
});
window.ractive = new Ractive({
    el: '#content',
    template: $('#template').text()
});