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>
<html>
    <script type="text/mustache" id="binding">
         Foo text is: {{foo}}
    </script>
    <script type="text/mustache" id="serialize_no_binding">
        {{#serialize}}
         Foo text is: {{foo}}
        {{/serialize}}
    </script>
    <script type="text/mustache" id="stack_with_partial">
        {{#bar}}
        <span>{{> #binding}}</span>
        {{/bar}}
    </script>
    <script type="text/mustache" id="stack_with_helper">
        {{#bar}}
            <span>{{> #binding}}</span><br>
            <span>{{#section}}
            <span>{{> #binding}}</span>
                {{/section}}</span>
        {{/bar}}
    </script>
    <script type="text/mustache" id="with_pack">
        {{#bar}}
            <span>{{> #binding}}</span><br>
            <span>{{#pack foo}}
            <span>{{> #binding}}</span>
                {{/pack}}</span>
        {{/bar}}
    </script>
    <script type="text/mustache" id="call_data">
        {{#bar}}
        {{> #nested_data}}
        {{/bar}}
    </script> 
    <script type="text/mustache" id="nested_data">
        Corrupt data: <span id="has_data" {{data 'bar'}}></span>
    </script>    
    <script type="text/mustache" id="call_data2">
        {{#bar}}
        {{> #nested_data2}}
        {{/bar}}
    </script> 
    <script type="text/mustache" id="nested_data2">
        {{#this}}
            Wrong item: <span id="has_data2" {{data 'bar'}}></span>
        {{/this}}
     </script>
         <script type="text/mustache" id="call_data3">
        {{#bar}}
        {{> #nested_data3}}
        {{/bar}}
    </script> 
    <script type="text/mustache" id="nested_data3">
        {{#bar}}
            Not corrupt data: <span id="has_data3" {{data 'bar'}}></span>
        {{/bar}}
     </script>
    <body>
    </body>
</html>

JavaScript

$(function() {
    can.Observe.prototype.toString = function() {
         return JSON.stringify(this);   
    }
    
    var obs = new can.Observe({
        foo : "bar"
        , bar : new can.Observe({})
    })
    
    Mustache.registerHelper("section", function() {
       var options = arguments[arguments.length-1];
       return options.fn(this);
    });
    
    
    $(document.body)
    .append("1. with live binding<br>")
    .append(can.view("#binding", obs))
    .append("<br><br>2. with serialize<br>")
    .append(can.view("#serialize_no_binding", obs))
    .append("<br><br>3. partials with full stack<br>")
    .append(can.view("#stack_with_partial", obs))
    .append("<br><br>4. helpers with full stack<br>")
    .append(can.view("#stack_with_helper", obs))
    .append("<br><br>5. Data is an array with 1+ steps of nested objects in partial<br>")
    .append(can.view("#call_data", obs));
    $("#has_data").html(JSON.stringify($("#has_data").data("bar")));
    $(document.body)
    .append('<br><br>Don\'t use "this" to work around it -- renders once for each item in the data array<br>')
    .append(can.view("#call_data2", obs));
    $("#has_data2").html(JSON.stringify($("#has_data2").data("bar")));
    $(document.body)
    .append('<br><br>DO use the property name from up the stack <br>')
    .append(can.view("#call_data3", obs));
    $("#has_data3").html(JSON.stringify($("#has_data3").data("bar")));    

    obs.attr("foo", "baz");

})