Simple starting point for Ember.js fiddles

by krisselden

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars">
    {{#each App.log}}<p>{{this}}</p>{{/each}}
</script>

JavaScript

window.App = Ember.Application.create({log:[]});

function log(s) {
    App.log.pushObject(String(s));
}

var a = {name: 'a'};
var b = {name: 'b'};

var InnerView = Em.View.extend({
    controller: b,
    render: function (buffer) {
        buffer.push('inner: ');        
        buffer.push(this.getPath('context.name'));
    }
});

var MiddleView = Em.View.extend({
    render: function (buffer) {
        buffer.push('middle: ');
        buffer.push(this.getPath('context.name'));
        this.innerView = this.appendChild(InnerView);
    }
});

var OuterView = Em.View.extend({
    controller: a,
    render: function (buffer) {
        buffer.push('outer: ');
        buffer.push(this.getPath('context.name'));
        this.middleView = this.appendChild(MiddleView);
    }
});

var outerView = App.outerView = OuterView.create();

Em.run(function () { outerView.append(); });

// assert
log('outer context correct: ' + (outerView.get('context') === outerView.get('controller'))); 
log('middle context correct: ' + (outerView.middleView.get('context') === outerView.get('controller')));
log('inner context correct: ' + (outerView.middleView.innerView.get('context') === b)); 
log('middle context correct: ' + (outerView.middleView.get('context') === outerView.get('controller')));