JSFiddle - React, Tailwind, and code Playground

by krisselden

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.2.js"></script>
<button id="create">Create</button>
<button id="destroy" style="display:none">Destroy</button>
<div id="app-root"></div>

JavaScript

var create$, destroy$;

window.App = Em.Application.create({
    rootElement: '#app-root'
});

App.controller = Em.Object.create({
    one: 'One',
    two: 'Two',
    three: 'Three',
    four: 'Four',
    five: 'Five',
    six: 'Six',
    seven: 'Seven',
    eight: 'Eight'
});

function create() {
    Em.run(function() {
        App.obj = Em.Object.create({
            twoWayBinding: 'App.controller.one',
            oneWayBinding: Em.Binding.oneWay('App.controller.two'),
            computed: function() {
                App.controller.get('three');
            }.property('App.controller.three'),
            chained: function() {
                this.get('computed');
            }.property('computed'),
            fourWillChange: function() {
                console.log(App.controller.get('four'));
            }.observesBefore('App.controller.four'),
            fourDidChange: function() {
                console.log(App.controller.get('four'));
            }.observes('App.controller.four'),
            destroy: function() {
                var meta = Em.meta(this),
                    bindings = meta.bindings,
                    key;
                if (bindings) {
                    for (key in bindings) {
                        if (bindings.hasOwnProperty(key)) {
                            this.get(key).disconnect(this);
                        }
                    }
                }
                this._super.apply(this, arguments);
            }
        });
    });
}

function destroy() {
    Em.run(function() {
        App.obj.destroy();
        delete App.obj;
    });
}

create$ = $('#create');
destroy$ = $('#destroy');
create$.click(function() {
    create();
    create$.hide();
    destroy$.show();
});
destroy$.click(function() {
    destroy();
    destroy$.hide();
    create$.show();
});