JSFiddle - React, Tailwind, and code Playground

by prometh

HTML

<script src="//canjs.com/release/2.0.3/can.jquery.js"></script>
<script type="text/mustache" id="test-component">
    <div class="FAILS {{#if state}}animate-{{state}}{{/if}}"></div>
    <div class="WORKS {{#state}}animate-{{.}}{{/state}}"></div>
</script>

JavaScript

can.Component.extend(
{
    tag: "test-component",
    template: can.view("#test-component"),
    scope: {state:""},
    events:{},
    init: function(element, options)
    {
        this.scope.attr("state", "intro");
        
        // avoids the need for opening console
        can.$(element).children("div").each(function(i, div)
        {
            can.$(div).html( div.className );
        });
    }
});



can.append( can.$("body"), can.view.mustache("<test-component/>") );