JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src='http://cdn.ractivejs.org/edge/ractive.min.js'></script>

<div id='container'></div>

<script id='mySubComponent' type='text/ractive'>
    {{ input.value }} <button on-click="click">Change</button>
</script>

<script id='myComponent' type='text/ractive'>
    {{#inputs}}
    <p><item input="{{.}}" /></p>
    {{/inputs}}
</script>

<script id="myTemplate" type='text/ractive'>
    {{#simulation}}
    <simulation inputs="{{ inputs }}" />
    {{/simulation}}
</script>

JavaScript

var SubComponent = Ractive.extend({
    "init": function() {
        this.on("click", function() {
            this.set("input", { "value": Math.random() });
        });
    },
    "template": "#mySubComponent"
});

var Component = Ractive.extend({
    "components": {
        "item": SubComponent
    },
    "init": function() {
        this.observe("inputs.*.value", function() {
            console.log("This is called when you click a button.");
        }, { "init": false });
    },
    "template": "#myComponent"
});

var View = Ractive.extend({
    "components": {
        "simulation": Component
    },
    "data": {
        "simulation": {
            "inputs": [
                {"value": "A"},
                {"value": "B"}
            ]
        }
    },
    "init": function() {
        this.observe("simulation.inputs.*.value", function() {
            console.log("This is not called, but should be.");
        }, { "init": false });
    },
    "template": "#myTemplate"
});

var view = new View({
    "el": "#container"
});