Ember JS + Ember Data

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://raw.github.com/emberjs/ember-rails/master/vendor/ember/development/ember.js"></script>
<script src="https://raw.github.com/emberjs/ember-rails/master/vendor/ember/development/ember-data.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="home">
    Home
    <ul>
    {{#each activity in content}}
        {{view App.HomeItemView activityBinding = "activity"}}
    {{/each}}
    isSelectedCount: {{selectedCount}} 
    </ul>
</script>

<script type="text/x-handlebars" data-template-name="homeItem">
    ID: {{activity.id}}, isSelected: {{activity.isSelected}}
    <a href='#' {{action "select" on="click" target="view"}}>select</a>
</script>

JavaScript

window.App = Ember.Application.create();
App.Store = DS.Store.extend({
    revision: 4,
    adapter: DS.fixtureAdapter
});

App.ActivityType = DS.Model.extend({
    id: DS.attr('number'),
    isSelected: DS.attr('boolean')
});

App.ActivityType.FIXTURES = [
    {
    "id": 1,
    "isSelected": false},
{
    "id": 2,
    "isSelected": false},
{
    "id": 3,
    "isSelected": false},
{
    "id": 4,
    "isSelected": false},
{
    "id": 5,
    "isSelected": false},
{
    "id": 6,
    "isSelected": false},
{
    "id": 7,
    "isSelected": false},
{
    "id": 8,
    "isSelected": false},
{
    "id": 9,
    "isSelected": false},
{
    "id": 10,
    "isSelected": false}
];


App.ApplicationController = Ember.Controller.extend();
App.ApplicationView = Ember.View.extend({
    templateName: 'application'
});

App.HomeController = Ember.Controller.extend({

    selectedCount: function() {
        console.log('computing...')
        return this.get('content').filterProperty('isSelected', true).get('length')
    }.property('[email protected]'),

            
    selectedCountObserver: function(){
       console.log('observing...')
    }.observes('[email protected]')
});

App.HomeView = Ember.View.extend({
    templateName: 'home'
});

App.HomeItemView = Ember.View.extend({
    templateName: 'homeItem',
    tagName: 'li',
    
    select: function() {
        this.get('activity').set('isSelected', !this.get('activity.isSelected'));
    }    
});

App.Router = Ember.Router.extend({
    location: 'hash',

    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/',
            connectOutlets: function(router, context) {
                var appController = router.get('applicationController');
                appController.connectOutlet('home', App.ActivityType.find());
            }
        })
    })

});
App.initialize();