Ember - select items

Real Ember starter kit to start simpe jsffidle example.

by fangyang

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.4/handlebars.min.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-1.0.0-rc.5.min.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    Application
    <hr/>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
    Items
    <hr/>
    
    {{#each item in items}}
    <div {{bindAttr class="item.isSelected:selected"}}>{{item.title}}</div>
    {{/each}}
    
    <button {{action next }}>Next</button>
</script>

CSS

.selected {
    background-color:pink;
}

JavaScript

var App = Ember.Application.create();

App.IndexRoute = Em.Route.extend({
    
});

App.Item = Ember.Object.extend({

});

App.ItemController = Ember.ObjectController.extend({
});


App.IndexController = Ember.Controller.extend({
    selectedId:0,
    isSelected: function() {
        return this.get('id') === this.get('selectedId');
    }.property('selectedId'),    

    items: [
    App.Item.create({title: "One", id:0, isSelected:true})
        , App.Item.create({title: "Two", id:1})
        , App.Item.create({title: "Three", id:2})
        , App.Item.create({title: "Four", id:4})
        ],

next: function() {
    var selectedId = this.get('selectedId');
    var prevItem = this.items[selectedId];
    if (prevItem) {
      prevItem.set('isSelected', false);   
    }

    var nextId = Math.min(this.get('selectedId') + 1, this.items.length - 1);
    this.set('selectedId', nextId);

    var nextItem = this.items[nextId];
    nextItem.set('isSelected', true);
}
});