Simple starting point for Ember.js fiddles

http://stackoverflow.com/questions/10047447/binding-to-a-nested-model-in-ember-js

by gnepud

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.8.1.js"></script>
<script src="https://github.com/downloads/pangratz/data/ember-data.js"></script>
<script type="text/x-handlebars" data-template-name="checklist" >
    {{#each checklists}}
      {{this.name}}
      remaining: {{this.remainingItemsCount}}
      {{#each checkitems}}
        {{view Ember.Checkbox checkedBinding="isDone"}}
      {{/each}}
      <a {{action "addCheckitem"}} class="clickable">add item</a>
      <hr/>
    {{/each}}

</script>

CSS

.clickable {
    cursor: pointer;
}

JavaScript

App = Ember.Application.create({});

App.Checkitem = DS.Model.extend({
    isDone: DS.attr('boolean')
});

App.Checklist = DS.Model.extend({
    name: DS.attr('string'),

    checkitems: DS.hasMany('App.Checkitem', {
        embedded: true
    }),

    remainingItemsCount: function() {
        var checkitemsToCount = this.get('checkitems');
        return checkitemsToCount.filterProperty('isDone', false).get('length');
    }.property('[email protected]').cacheable()
});

App.store = DS.Store.create({
    revision: 4
});

App.checklistsController = Ember.ArrayProxy.create({
    content: App.store.find(App.Checklist)
});

Ember.View.create({
    templateName: 'checklist',
    checklistsBinding: 'App.checklistsController',
    addCheckitem: function(evt) {
        var checklist = evt.context;
        checklist.get('checkitems').addObject(App.Checkitem.createRecord({
            isDone: false
        }));
    }
}).append();


var checklist = App.Checklist.createRecord({
    name: 'firstChecklist'
});

App.Checklist.createRecord({
    name: 'secondChecklist'
});

checklist.get('checkitems').addObject(App.Checkitem.createRecord({
    isDone: false
}));
checklist.get('checkitems').addObject(App.Checkitem.createRecord({
    isDone: true
}));
checklist.get('checkitems').addObject(App.Checkitem.createRecord({
    isDone: true
}));