Child Views

The latest build of Ember.

by Jeremy Gillick

HTML

<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.1.2.js"></script>
<script src="http://builds.emberjs.com/tags/v1.3.1/ember.js"></script>
<script src="http://builds.emberjs.com/tags/v1.0.0-beta.4/ember-data.prod.js"></script>
<div id="my-app"></div>
<script type="text/x-handlebars" data-template-name="index">
    <h1>Hello World</h1>
    
    {{view App.AreaView}}
</script>
<script type="text/x-handlebars" data-template-name="area">
    <button {{action "showChild" target="view"}}>Show child</button>
</script>
<script type="text/x-handlebars" data-template-name="child">
    <h2>Child View</h2>
    <p>
        {{view Ember.TextField valueBinding="view.foo"}}
    </p>
</script>

CSS

h1, h2 { font-size: 2em; font-weight: bold; margin: 7px 0; }
h2 { font-size: 1.5em; }
#my-app { padding: 10px; border: solid 1px #006; }
p { margin: 7px 0; }

JavaScript

App = Ember.Application.create({
    rootElement: '#my-app'
});


//
// Main Program
//
App.IndexController = Em.ObjectController.extend({
    content: Ember.Object.create({'bar': 'baz'})
});
App.IndexView = Em.View.extend({
    templateName: 'index',
});
App.AreaView = Em.View.extend({
    templateName: 'area',
    
    actions: {
        showChild: function(){
            console.log('Open child!');
            var child = this.createChildView(App.GranchildView);
            child.appendTo(App.rootElement);
            //child.append();
        }
    }
});
App.ChildView = Em.View.extend({});
App.GranchildView = App.ChildView.extend({
    templateName: 'child',
    foo: 'bar',
    
    init: function(){
        this._super();
    },
    
    _foo: function(){
        console.log(this.get('foo'));
    }.observes('foo')
});