Ember.js - static and dynamic class bindings

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.8.1.js"></script>
<script type="text/x-handlebars">
  <h1>Using bindAttr</h1>
  {{#each App.residents}}
  <div {{bindAttr class="isIrish:irish isTall:tall"}}>{{name}}</div>
  {{/each}}

  <h1>Using custom view</h1>
  {{#each App.residents}}
  {{#view App.CustomDiv classBinding="resident.isIrish:irish resident.isTall:tall" residentBinding="this"}} {{resident.name}} {{/view}}
  {{/each}}

  <h1>Using TextField view - different contexts used for bindings</h1>
  {{#each App.residents}}
  <!-- NOTE: Context in which valueBinding and classBinding are evaluated is different -->
  {{view Ember.TextField valueBinding="name" classBinding="resident.isIrish:irish resident.isTall:tall" residentBinding="this"}}
  {{/each}}

  <h1>Using TextField view - same context used for bindings</h1>
  {{#each App.residents}}
  {{view Ember.TextField valueBinding="name" classBinding="isIrish:irish isTall:tall"}}
  {{/each}}
</script>

CSS

h1 { font-size: 120%; margin: 20px 0 }
.customDiv { padding-left: 10px }
.irish { color: green }
.tall { font-size: 140% }

JavaScript

App = Ember.Application.create({
    residents: [
        {name:    "St. Patrick",
         isIrish: true,
         isTall:  true},
        
        {name:    "Leprechaun",
         isIrish: true,
         isTall:  false}]
});

App.CustomDiv = Em.View.extend({
    classNames: ["customDiv"] 
});