select.js

// ==========================================================================
// Project:   SproutCore Handlebar Views
// Copyright: ©2011 Strobe Inc. and contributors.
// License:   Licensed under MIT license (see license.js)
// ==========================================================================

var get = SC.get, set = SC.set;

SC.SelectOption = SC.View.extend({

  tagName: 'option',
  template: SC.Handlebars.compile("{{label}}"),
  attributeBindings: ['value', 'selected'],

  labelBinding: '*content.label',
  valueBinding: '*content.value'

});

// TODO:
// this doesn't seem to work for the case where
// the value changes from the other side of the
// relationship, ie in the controller layer

SC.Select = SC.CollectionView.extend({
  tagName: 'select',
  itemViewClass: SC.SelectOption,

  value: null,

  willInsertElement: function() {
    this._elementValueDidChange();
  },

  change: function() {
    this._elementValueDidChange();
  },

  _elementValueDidChange: function() {
    set(this, 'value', this.$().val());
  }
});

/* USAGE :

{{view SC.Select contentBinding="..."}}

{{view SC.Select contentBinding="..." itemLabelBinding="content" itemValueBinding="content"}}

{{view SC.Select contentBinding="..." itemLabelBinding="*content.something" itemValueBinding="*content.orOther"}}

*/