JSFiddle - React, Tailwind, and code Playground

by jeffutter

HTML

<script src="https://raw.github.com/gist/1329411/ee7c55b0b4643fadfccde2988c634345d48600fe/sproutcore.js"></script>
<script src="https://raw.github.com/gist/1329489/2b562eababe486fd2f7498de348411d04e303dfe/sproutcore-datastore.js"></script>
<script type='text/x-handlebars'>
    {{#view contentBinding="MyApp.data" id="tableDetail"}}
    {{#each content}}
    inEach: {{view MyApp.AddMenuItemButton}}
    {{/each}}
    outEach: {{view MyApp.AddMenuItemButton}}
    {{/view}}
</script>

JavaScript

MyApp = SC.Application.create({
    NAMESPACE: 'MyApp',
    data: SC.ArrayProxy.create({
        content: []
    })
});

MyApp.AddMenuItemButton = SC.TextArea.extend({
    value: 'Add Menu Item'
});

MyApp.data.pushObject({
    bills: [{
        name: 'foo'}]
});
SC.run.later(function() {
    MyApp.data.pushObject({
        bills: [{
            name: 'foo'}]
    });
}, 1000)
SC.run.later(function() {
    MyApp.data.pushObject({
        bills: [{
            name: 'foo'}]
    });
}, 3000)
SC.run.later(function() {
    MyApp.data.pushObject({
        bills: [{
            name: 'foo'}]
    });
    console.log(MyApp.data.get('content'));
}, 5000)