EMBER WORKSHOP: Controllers and Object Model

Ember.js Controllers, simple binding

by jdcravens

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<script src="http://builds.emberjs.com/release/ember.js"></script>
<script type="text/x-handlebars">

   <p>Name: {{input type="text" value=name placeholder="Enter your name"}}</p>
   <button {{action "changeName"}}>action</button>
    
   <hr>
   
   <p>from controller:</p>
   {{input type="text" value=name}}
    
   {{view myView nameBinding="name"}}  <!-- bound in the view -->
   {{view myView}} <!-- view's context is shared -->
</script>

<script type="text/x-handlebars" data-template-name="myTemplate">
    <p>from view:</p>
    {{input type="text" value=name}} <!-- bound in the view -->
</script>

JavaScript

App = Ember.Application.create();

// Think back to what you learned in Object Model lessons

App.ApplicationController = Ember.Controller.extend({
  actions:{
    changeName:function(){
      this.set('name','Future Insights 2014'); // set the model's name
    }
  },   
  myView:Ember.View.extend({
    templateName:'myTemplate',
    //nameBinding:'controller.name'    
  })
});