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>
<script type="text/x-handlebars" data-template-name="hello">
<b>{{App.hello}}</b>
</script>
<button id="view-create">Create View</button>
<button id="view-destroy" style="display:none">Destroy View</button>
<button id="show-leak">Show Leak</button>
<div id="app-root"></div>

JavaScript

var viewCreate$, viewDestroy$;

window.App = Em.Application.create({
    rootElement: '#app-root',
    hello: 'Hello World!'
});

function showLeak() {
    var appMeta = Em.meta(App),
        helloChainWatchers = chainWatchers.hello,
        count = 0,
        prop, helloNode, appNode, viewNode, view;
    for (prop in helloChainWatchers) {
        if (helloChainWatchers.hasOwnProperty(prop)) {
            helloNode = helloChainWatchers[prop];
            appNode = helloNode._parent;
            viewNode = appNode._parent;
            view = viewNode._value;
            if (view.isDestroyed) {
                count++;
            }
        }
    }
    alert('App.hello binding holding onto ' + count + ' destroyed views');
}

App.HelloView = Em.View.extend({
    templateName: 'hello'
});

function cleanGlobalTuple() {
    Em.normalizeTuple(window, 'Em.A');
}

function createView() {
    App.helloView = App.HelloView.create();
    App.helloView.appendTo('#app-root');
}

function destroyView() {
    if (App.helloView) {
        App.helloView.destroy();
        delete App.helloView;
        cleanGlobalTuple();
    }
}

viewCreate$ = $('#view-create');
viewDestroy$ = $('#view-destroy');
viewCreate$.click(function() {
    createView();
    viewCreate$.hide();
    viewDestroy$.show();
});
viewDestroy$.click(function() {
    destroyView();
    viewDestroy$.hide();
    viewCreate$.show();
});