JSFiddle - React, Tailwind, and code Playground

by air_hadoken

HTML

<script src="http://canjs.com/release/latest/can.jquery.js"></script>
<script src="http://canjs.com/release/latest/can.stache.js"></script>
<script type="text/mustache" id="splittest">
    
    <div>baz {{#if_foo_truthy}}bar {{quux}}{{/if_foo_truthy}} quux</div>
    
</script>

JavaScript

can.Mustache.registerHelper("if_foo_truthy", function(options) {
    var ret = can.view.mustache(
        "{{#if foo}}"
        + $("<div>").append(options.fn()).html()
        + "{{/if}}"
    );
    ret = can.view.render(ret,
        options.contexts
    );
    return ret;
});

var map = new can.Map({foo : 0})

can.view("#splittest", map, function(frag) {
    $(document.body).append(frag);
    
    setTimeout(function() {
        map.attr("foo", 1);
        setTimeout(function() { 
            map.attr("quux", "thud");   
        }, 1500);
    }, 3000);
});