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.ejs.js"></script>
<script type="text/mustache" id="tabs">
    {{#each items}}
        <tab-resource></tab-resource>
    {{/each}}
</script>
    
    <div class="container"></div>

JavaScript

can.Component.extend({
  tag: "tab-resource",
   template: "<div class=\"resource\">this tab is {{text}} and componentized</div>",
    events : {
        init : function(el) {
            setTimeout(function() {
                new Resource(el.find(".resource"));
            }, 10);
        }
    }
});

can.Control("Resource", {
    init : function() {
       this.element.append(" and a resource added");   
    }
});

can.Control("TabTest", {
    defaults : {
        data : new can.Map({
            items :[
                { text : "foo"}, 
                {text : "bar"}
            ]})
    }
}, {
    init : function() {
        var that = this;
        can.view("#tabs", this.options.data, this.options.ejsfns, function(frag) {
            that.element.append(frag);
        });
    }

});

var ctl = new TabTest(".container", {});

setTimeout(function() {
    ctl.options.data.items.push({ text : "baz" });
}, 3000);