Ember Latest

The latest build of Ember.

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script src="http://builds.emberjs.com/ember-data-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
  <div class="container">
    <div class="panel panel-default">
      <div class="panel-heading">
          <h3 class="panel-title">Up &amp; Down Keypress Example</h3>
      </div>
      <div class="panel-body">
        {{outlet}}
      </div>
    </div>
  </div>
</script>

<script type="text/x-handlebars" data-template-name="index">
  Selected: {{currentSelected.name}}
  {{each itemViewClass='App.UserView'}}
</script>

<script type="text/x-handlebars" data-template-name="user">
  <div {{bind-attr class=':user isActive'}} {{action 'changeSelection' this}}>
      {{name}} {{#if isActive}} -> selected{{/if}}
  </div>
</script>

CSS

*:focus {
    outline: 0;
}

.user {
    padding: 10px;
    background: #eee;
    margin-bottom: 2px;
    cursor: pointer;
}

.is-active {
    background: #888;
    color: #fff;
}

JavaScript

App = Ember.Application.create();

App.ApplicationAdapter = DS.FixtureAdapter.extend();

App.User = DS.Model.extend({ name: DS.attr('string') });

App.User.FIXTURES = [
  { id: 1, name:'Jason' },
  { id: 2, name:'Tom' },
  { id: 3, name:'Tina' },
  { id: 4, name:'Steve' },
  { id: 5, name:'Bill' },
  { id: 6, name:'Jason' },
  { id: 7, name:'Tom' },
  { id: 8, name:'Tina' },
  { id: 9, name:'Steve' },
  { id: 10, name:'Bill' }
];
    
App.Router.map(function(){});

App.IndexRoute = Ember.Route.extend({
  model: function(){
    return this.store.find('user');
  }
});

App.IndexController = Ember.ArrayController.extend({
    itemController: 'user',
    actions: {
        changeSelection: function(params) {
            var select;
            
            // we are handling clicks and keyPresses in the same action so we need to
            // see which is what when it comes into this action
            if(Ember.typeOf(params) === 'object' && params.hasOwnProperty('direction')) {
                // up || down keyPress event
                var currentIdx = this.indexOf(this.get('currentSelected')),
                    selectIdx = (currentIdx + params.direction) % this.get('length');
                
                // if it's moving over the top, select the last object
                if((currentIdx + params.direction) === -1) {
                    selectIdx = this.get('length') - 1;
                }
                
                select = this.objectAt(selectIdx);
            }
            else {
                // click event
                select = this.objectAt(this.get('content').indexOf(params));                
            }
            
            if(!Ember.isEmpty(select)) {
                this.setEach('isActive', false); // set all userControllers to non-active
                select.set('isActive', true);    // set the user controller to be select to active
            }
        }
    },
    init: function() {
        this._super();
    
        //...