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.table" id="tableDetail"}}
    {{#each content.bills}}
    inEach: {{view MyApp.AddMenuItemButton}}
    {{/each}}
    outEach: {{view MyApp.AddMenuItemButton}}
    {{/view}}
</script>

CSS

.clear {
    clear: both;
}

.actions {
    clear: both;
}

#tableDetail #bills .bill {
    border: 1px solid black;
    float: left;
}

dl {
    padding: 0.5em;
    width: 300px;
    marign: 0.5em;
}
dt {
    float: left;
    clear: left;
    width: 100px;
    text-align: right;
    font-weight: bold;
    color: green;
}

dt:after {
    content: ":";
}

dd {
    display: block;
    min-height: 1em;
    margin: 0 10px 0 110px;
    padding: 0 0 0.5em 0;
}

JavaScript

SC.Record.fixtures.set('simulateRemoteResponse', true);

MyApp = SC.Application.create({
    NAMESPACE: 'MyApp',
    store: SC.Store.create().from(SC.Record.fixtures),
    data: SC.ArrayProxy.create({})
});

MyApp.Record = SC.Record.extend({
    childRecordNamespace: MyApp,
    primaryKey: '_id'
});

MyApp.Table = MyApp.Record.extend({
    name: SC.Record.attr(String),
    bills: SC.Record.toMany('MyApp.Bill', {
        key: '_bills',
        inverse: 'table'
    }),
});
MyApp.Table.FIXTURES = [
    {
    _id: 1,
    name: 'table1',
    _bills: [1, 2]},
{
    _id: 2,
    name: 'table2'}
];

MyApp.Bill = MyApp.Record.extend({
    table: SC.Record.toOne('MyApp.Table', {
        key: 'table_id',
        inverse: 'bills'
    })
});
MyApp.Bill.FIXTURES = [
    {
    _id: 1,
    table_id: 1},
{
    _id: 2,
    table_id: 1}
];

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

MyApp.data.set('table', MyApp.store.find(MyApp.Table, 1));