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({
    render: function(buffer) {
        buffer.push('inner: ');
        buffer.push(this.getPath('context.name'));
    }
});

var innerView = null;

var middleView = Em.ContainerView.create();

var outerView = App.outerView = Em.ContainerView.create({
    controller: a
});

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

Em.run(function () {
    outerView.set('currentView', middleView);
});

Em.run(function () {
    innerView = InnerView.create({controller: b});
    middleView.set('currentView', innerView);
});

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