JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script type="text/ractive" id="tpl-all">
    <p>
    {{#config.order}}
        <c-bundy who="{{config.bundies[this]}}"/>
    {{/order}}
    </p>
</script>
<script type="text/ractive" id="tpl-main">
    <div><c-all config="{{config}}"/></div>
</script>
<script type="text/ractive" id="tpl-bundy">
    {{who.name}}<br/>
</script>
<div id="main"></div>

JavaScript

var bundies = {
    "al": {"name": "Al Bundy"},
    "peg": {"name": "Peggy Bundy"},
    "kel": {"name": "Kelly Bundy"},
    "bud": {"name": "Bud Bundy"}
};
var order = ["kel","peg","al"];

var fComponent = Ractive.extend({
    template: "#tpl-bundy",
});

var fShowAll = Ractive.extend({
    "template": "#tpl-all",
    "components": {"c-bundy": fComponent}
});
var oMain = new Ractive({
    "el": "#main",
    "template": "#tpl-main",
    "components": {"c-all": fShowAll},
    "data":
    {
        "config": {"order": order, "bundies": bundies}
    }
});

oMain.unshift("config.order", "bud");