managing_multiple_checkboxes.js

/**
  NOTE: The template in this example relies on itemView, which is not yet
        in SproutCore 2.0 master, but is coming
 */


MyApp.Selection = SC.Object.extend({
  name: null,
  isSelected: false
});

MyApp.content = [
  MyApp.Selection.create({ name: "Male" }),
  MyApp.Selection.create({ name: "Female" })
]

// Make a controller that manages a list of items. The semantics are:
//   * you can check as many of the items as you want
//   * if you check off the "Other" checkbox, all of the checkboxes
//     become unchecked
//   * if the other checkbox is checked off and you check off another
//     checkbox, the other checkbox becomes unchecked
MyApp.checkboxFieldController = SC.ArrayProxy.create({
  contentBinding: "MyApp.content",

  // computed property.
  isOtherSelected: function(key, value) {
    // This path will be triggered when the user checks or unchecks
    // the other checkbox.
    if (value !== undefined) {
      // If the user checked it off, go through each of the items and
      // mark them as unselected
      if (value === true) {
        this.forEach(function(item) { item.set('isSelected', false) }
      }

      // Always return the value being set in a setter
      return value;
    } else {
      // This path will be called in two cases:
      //   * immediately upon rendering
      //   * when any of the isSelected properties of any of the child
      //     elements (the @each.isSelected dependency) change.
      //
      // In both of these cases, the isOtherSelected property should be
      // false.
      return false
    }
  }.property('@each.isSelected')
});

/* TEMPLATE
{{#collection contentBinding="MyApp.checkboxFieldController"}}
  {{view SC.Checkbox labelBinding="itemView.content.name" valueBinding="itemView.content.isSelected"}}
{{/collection}}
{{view SC.Checkbox label="Other" valueBinding="MyApp.checkboxFieldController.isOtherSelected"}}
*/