Controllers

by ethan_selzer

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-pre.4.min.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>Application Template</h1>
    {{ outlet }}
</script>

<script type="text/x-handlebars" data-template-name="index">
    <h2>Index Template</h2>
    {{#view Ember.View controllerBinding="App.controller"}}
        {{name}}
    {{/view}}
    {{#view Ember.View controllerBinding="App.objectController"}}
        {{name}}
    {{/view}}
     {{#view Ember.View controllerBinding="App.arrayController"}}
        {{#each controller}}
            {{name}}
        {{/each}}
    {{/view}}
    <div {{action "clicked" on="click"}}>Click me</div>
</script>

CSS

body {
  padding: 2em;   
}

JavaScript

App = Ember.Application.create();

App.controller = Ember.Controller.create( {
    name : 'basic controller'
} );

App.objectController = Ember.ObjectController.create( {
    model : Ember.Object.create( {
        name : 'object controller' 
    } )
} );

App.arrayController = Ember.ArrayController.create( {
    model : Ember.A( [ Ember.Object.create( {
        name : 'array controller' 
    } ) ] )
} );

App.ApplicationController = Ember.Controller.extend({
    needs: ['index'],
    
    isIndexClicked: function() {
        alert("its changed to " + this.get("controllers.index.isClicked") ) ;
    }.observes('controllers.index.isClicked'),    
}) ;
App.IndexController = Ember.ObjectController.extend({
    isClicked: false,
    clicked: function() {
        this.set("isClicked", true) ;
    }
}) ;