Simple starting point for Ember.js fiddles

by krisselden

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.6.js"></script>
<div id="log" style="position:absolute; bottom:0; left: 0; right: 0; height: 300px; overflow: auto; background: rgba(0,0,0,0.5); color: white; font-family: monospace">
</div>

JavaScript

function log(msg) {
    var loop, indent = '';
    console.log(msg);
    console.trace();
    loop = Em.run.currentRunLoop;
    while (loop) {
        indent += '  ';
        loop = loop.prev();
    }

    $('#log').append($('<pre></pre>').text(indent + msg));
}

function logQueues() {
    if (Ember.run.currentRunLoop) {
        var queues = Object.keys(Ember.run.currentRunLoop._queues || {});
        log('queues == [' + queues.join(',') + ']');
    } else {
        log('no run loop');
    }
}

function logViews() {
    log('$(".ember-view").length == ' + $(".ember-view").length);
}

log('BEGIN load event');

var obj = {
    foo: 'foo',
    toString: function() {
        return 'obj';
    }
};

var View = Ember.View.extend({
    render: function(buf) {
        buf.push(this.content);
    }
});

Ember.addObserver(obj, 'bar', function() {
    log('BEGIN barDidChange');
    log('obj == ' + JSON.stringify(obj));
    log('END barDidChange');
});

Ember.run(function() {
    log('BEGIN run #1');
    logQueues();
    log('binding obj.bar to obj.foo // triggers autorun via setTimeout');
    Ember.bind(obj, 'bar', 'foo');
    logQueues();
    log('obj == ' + JSON.stringify(obj));
    log('END run #1');
});

log('obj == ' + JSON.stringify(obj));
log('SCHED setTimeout #1');
setTimeout(function() {
    log('BEGIN setTimeout #1');
    log('obj.foo = "baz" // triggers autorun via setTimeout');
    Ember.set(obj, 'foo', 'baz');
    logQueues();
    log('obj == ' + JSON.stringify(obj));
    Ember.run(function() {
        log('BEGIN run #2');
        log('create and append view A, schedules render');
        View.create({
            content: 'A'
        }).append();
        logViews();
        logQueues();
        Ember.run(function() {
            log('BEGIN run #3');
            log('create and append view B, schedules render');
            View.create({
                content: 'B'
            }).append();
            logViews();
            logQueues();
            log('END...