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.extend({
    alpha: 'Alpha',
    beta: 'Beta',
    gamma: 'Gamma',
    delta: 'Delta'
});

App.controller = App.Controller.create();

App.TestObject = Em.Object.extend({
    alphaBinding: 'App.controller.alpha',
    betaBinding: Em.Binding.oneWay('App.controller.beta'),
    gamma: function() {
        App.controller.get('gamma');
    }.property('App.controller.gamma'),
    gammaChain: function() {
        this.get('gamma');
    }.property('gamma'),
    detaDidChange: function() {
        this.set('delta', App.controller.get('delta'));
    }.observes('App.controller.delta')
});

function create() {
    Em.run(function() {
        App.obj = App.TestObject.create();
    });
}

function destroy() {
    Em.run(function() {
        App.obj.alphaBinding.disconnect(App.obj);
        App.obj.betaBinding.disconnect(App.obj);
        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();
});