This is a short description on how you can use a selection to set and display the content of a relation.

Of course we begin with a set of simplified records:

MyApp.Exam = SC.Record.extend({

     date: SC.Record.attr(String),

     committee: SC.Record.toMany('MyApp.Teacher', { isMaster: YES })

});

MyApp.Teacher: SC.Record.extend({

   name: SC.Record.attr(String)

});

These records have a toMany relation. You can of course define an inverse property on the Teacher model, but this is not necessary for this example.

Next, let set up a view to display the teachers:

      teachers: SC.ScrollView.design({
         layout: { left: 5, width: 300, top: 20, height: 360 },
         classNames: 'sc-bezel-border',
         contentView: SC.SourceListView.design({
            useToggleSelection: YES,
            allowsMultipleSelection: YES,
            contentValueKey: 'name',
            action: MyApp.teacherExamSelectController.updateExamTeachers,
            contentBinding: 'Meetme.teacherExamSelectController.arrangedObjects',
            selectionBinding: 'Meetme.teacherExamSelectController.selection',
            canReorderContent: NO
         })     
       })

These settings allow you to have a toggle selection and as we want to be able to select multiple teachers for the committee, we set allowsMultipleSelection to YES.

Next we need two controllers: an object controller to hold the exam we want to edit, and the array controller to hold the set of teachers to choose from. The object controller can be empty, but the array controller cannot be empty.

The array controller will need to enable us to both update the selection as a different exam is chosen, and it will also need to send the updates back to the exam object controller. Because in such an update scheem it is very easy in Sproutcore to create endless loops, we need to pay attention we are not creating one. That is why you perhaps already noticed the action defined on the source list view definition above.

MyApp.teacherExamSelectController = SC.ArrayController.create( {
  _currentExamIdBinding: 'Meetme.currentExamController.id',
 
  _selectionUpdate: function(){
     var curExamTeachers = Meetme.currentExamController.get('committee');
     if(curExamTeachers){
        // set selection
        this.selectObjects();
        this.selectObjects(curExamTeachers);
     }
     else {
        // set selection to null
        this.set('selection',null);
     }
  }.observes('_currentExamId'),
 
  updateExamTeachers: function(){
     //console.log('Updating the exam teachers info on the current exam');
     var curSelection = this.get('selection');

     var newCommittee = curSelection.toArray();
     MyApp.currentExamController.set('committee',newCommittee);
  }

});

There are two functions in this array controller. The first function observes a unique property on the object controller, in this case the 'id' property. The function will set the selection on the array controller to the records in the ManyArray returned by request to the object controller.

(Note: an alternative version to the content of the first function could be this.get('selection').constrain(curExamTeachers) ... but this is untested at the moment of writing this page).

The second function is fired by the click of the user on an item on the source list view. It first gets the current selection, then gets a reference to the committee property on the object controller, and then replaces the content by the selection.

The only thing you need to do now is to load your data!

Notes: curSelection.toArray() is needed because replace doesn't know how to handle selection sets (which is the type of value returned by getting the selection.