JSFiddle - React, Tailwind, and code Playground

by drew

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.min.js"></script>
<script src="https://raw.github.com/drewcovi/traclist/master/ember.js"></script>
<script src="https://raw.github.com/drewcovi/traclist/master/ember-data.min.js"></script>
    <script type="text/x-handlebars">

        {{view App.SetFooField}}
        {{view App.SetBarField}}

    </script>

JavaScript

App = Em.Application.create();

App.store = DS.Store.create({
  revision: 7,
  adapter: DS.fixtureAdapter
});

/**************************
* Models
**************************/

App.Foo = DS.Model.extend({
    title: DS.attr('string')
});
App.Bar = DS.Model.extend({
    foo: DS.belongsTo(App.Foo),
    title: DS.attr('string')
});
App.Foo.reopen({
    bars: DS.hasMany(App.Bar),
});

/**************************
* Fixtures
**************************/

App.Foo.FIXTURES = [
    {
        id: '0',
        title: 'Footitle 1',
        bars: ['0','1']
    },
    {
        id: 1,
        title: 'Footitle 2',
        bars: ['0','1','2']
    }
];

App.Bar.FIXTURES = [
    {
        id: '0',
        title: 'Bartitle 1'
    },
    {
        id: '1',
        title: 'Bartitle 2'
    },
    {
        id: '2',
        title: 'Bartitle 3'
    }
];


/**************************
* Views
**************************/

App.SetFooField = Em.Select.extend({
    contentBinding: 'App.fooController',
    selectionBinding: 'content.selected',
    optionLabelPath: 'content.title'
});

App.SetBarField = Em.Select.extend({
    contentBinding: 'App.barController',
    valueBinding: 'content.selectedBar',
    optionLabelPath: 'content.title' //want to use content.title but always comes back null
});

/**************************
* Controllers
**************************/

App.fooController = Em.ArrayController.create({
    content: App.store.findAll(App.Foo)
});

App.barController = Em.ArrayController.create({
    contentBinding: 'App.fooController.selected.bars'
});