Ember.js - static and dynamic class bindings

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars">
  {{#each App.residents}}
  {{#view App.CustomDiv residentBinding="this"}} {{resident.name}} {{/view}}
  {{/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"],
    classNameBindings: ["nationalityClass",
                        "heightClass"],

    nationalityClass: Ember.computed(function() {
      if (this.getPath('resident.isIrish')) {
         return "irish";
      } else {
         return "";
      }
    }).property('resident.isIrish'),
    
    heightClass: Ember.computed(function() {
      if (this.getPath('resident.isTall')) {
         return "tall";
      } else {
         return "";
      }
    }).property('resident.isTall')                            
});