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.map.attributes.js"></script>
<script id="idtest" type="text/mustache">
        <div class="someclass">
            {{#first_level}}
                <input type="text" value="{{name}}" />
            {{/first_level}}
            <input type="text" value="{{#modelize}}{{id}}{{/modelize}}" />
        </div>
</script>

JavaScript

can.Model.extend("MyModel", {
}, {});

var global_object = { id : "200", name : "Blah" };
var map;
Mustache.registerHelper("modelize", function(options) {
   map.attr({ first_level : global_object });
   return options.fn(options.contexts.add(map.attr("first_level")));
});

$(function() {
    map = new MyModel({ id : "100" });
    
    can.view("#idtest", $.when(map))
    .then(function(idfrag) {
        $(document.body).append(idfrag);
        setTimeout(function() {
            map.first_level.attr({name : "Bar"} );
        }, 2000);
    });
});