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) {
    $('#log').append($('<pre></pre>').text(String(msg)));
}

var set = Ember.set;

var source = {
    a: 'a',
    b: 'b'
};

Ember.LOG_BINDINGS = true;

function SuperClass() {
}

SuperClass.PrototypeMixin = Ember.Mixin.create({
    source: source,
    fooBinding: 'source.a'
});

function SubClass() {  
}

SubClass.prototype = new SuperClass();

SubClass.PrototypeMixin = Ember.Mixin.create({
    fooBinding: 'source.b'
});


Ember.run(function () {
    SuperClass.PrototypeMixin.apply(SuperClass.prototype);
    SubClass.PrototypeMixin.apply(SubClass.prototype);
}); // initial binding sync flushed

var superInstance = new SuperClass();
var subInstance = new SubClass();

console.dir(subInstance);

log(superInstance.foo);
log(subInstance.foo);

Ember.run(function () {
   set(source, 'a', 'a+'); 
}); // flush binding sync

log(superInstance.foo);
log(subInstance.foo);

Ember.run(function () {
   set(source, 'b', 'b+'); 
}); // flush binding sync

log(superInstance.foo);
log(subInstance.foo);

Ember.run(function () {
   set(subInstance, 'foo', 'c');
});

log(superInstance.foo);
log(SubClass.prototype.foo);
log(subInstance.foo);
log(JSON.stringify(source));