Sproutcore 2.0 one to many relationships

Question

I've been struggling to get the bindings correct for one to many relationship using Sproutcore 2.0.

My templates look like this:

<script type="text/x-handlebars">
  {{#collection contentBinding="HTH.projectsController.content"}}
    <h3>{{content.title}}</h3>
    {{#collection contentBinding="content.tasks"}}
    <span>{{content.title}}</span>
    {{/collection}}
  {{/collection}}
</script>

While the actual code looks like:

HTH.Project = SC.Record.extend({
  title: SC.Record.attr(String),
  tasks: SC.Record.toMany('HTH.Task',{
    isMaster: YES,
    inverse: 'project'
  })
});

HTH.Task = SC.Record.extend({
  title: SC.Record.attr(String),
  project: SC.Record.toOne('HTH.Project', {
    isMaster: NO
  })
});

HTH.Project.FIXTURES = [ { guid: 1, title: 'Send man to moon', tasks: [1,2]}, 
                         { guid: 2, title: 'Master handstand', tasks: [3]}];
HTH.Task.FIXTURES    = [ { guid: 1, title: 'Find rocket',    project: 1}, 
                         { guid: 2, title: 'Find fuel',      project: 1},
                         { guid: 3, title: 'Stand on hands', project: 2}];

HTH.store = SC.Store.create().from(SC.Record.fixtures);

// Controllers

HTH.projectsController = SC.ArrayProxy.create({
  content: HTH.store.find(HTH.Project)
});

Now I can update tasks, and these will update the UI. For example:

HTH.store.find(HTH.Project).get('firstObject').set('title','Updated the title!');

However, if I create a new project and dynamically add a task to that the UI will add the new project, but never add any offers:

var project = HTH.store.createRecord(HTH.Project, {title: "New" });
var task = HTH.store.createRecord(HTH.Task, {title: "New task" });
project.get('tasks').pushObject(task);

I'm certain this is down to a binding not working as expected, or a property that needs to be observed. Can anyone help?

NOTE: This question was asked before SproutCore 2.0 became Ember.js. It also references an unofficial port of the SproutCore 1.x data store, which has since been superseded by the officially supported ember-data library.

Answer 1

In order for a record to be useable it needs to be assigned an ID.

This means that:

var project = HTH.store.createRecord(HTH.Project, {title: "New" });
var task = HTH.store.createRecord(HTH.Task, {title: "New task" });
project.get('tasks').pushObject(task);

Becomes:

var project = HTH.store.createRecord(HTH.Project, {title: "New" }, 123);
var task = HTH.store.createRecord(HTH.Task, {title: "New task" }, 321);
project.get('tasks').pushObject(task);

The changes will then be reflected in the UI