JSFiddle - React, Tailwind, and code Playground

by air_hadoken

HTML

<script src="http://canjs.us/release/latest/can.jquery.js"></script>
<script src="http://canjs.us/release/latest/can.view.mustache.js"></script>
    <script type="text/mustache" id="binding">
        Foo text is: {{#if quux}}{{foo 'bar'}}{{/if}}
        <br>Foo text should be: {{#if 1}}{{baz 'bar'}}{{/if}}
    </script>
    <body>
    </body>

JavaScript

$(function() {
    var bar = [], baz = [];
    Mustache.registerHelper("foo", function(text) {
        bar.push(text);
        return bar.join(",");
    });
    Mustache.registerHelper("baz", function(text) {
       baz.push(text);
        return baz.join(",");
    });
    
    var obs = new can.Observe({
        quux : false
    });
    $(document.body)
    .append("1. with live binding<br>")
    .append(can.view("#binding", obs))

    $(document.body).append("<br>foo was called " + bar.length + " times before changing attr<br>");
    obs.attr("quux", true);
    $(document.body).append("foo was called " + bar.length + " times after changing attr<br>");
});