listening for change on SelectView and SelectMultipleView

This commit is contained in:
Nicholas Bollweg 2015-01-29 21:53:02 -05:00
parent 6a372a4c66
commit 7643b3ccf0

View File

@ -431,7 +431,8 @@ define([
this.$listbox = $('<select />') this.$listbox = $('<select />')
.addClass('widget-listbox form-control') .addClass('widget-listbox form-control')
.attr('size', 6) .attr('size', 6)
.appendTo(this.$el); .appendTo(this.$el)
.on('change', $.proxy(this.handle_change, this));
this.update(); this.update();
}, },
@ -453,8 +454,7 @@ define([
.text(item) .text(item)
.attr('data-value', encodeURIComponent(item)) .attr('data-value', encodeURIComponent(item))
.attr('selected_label', item) .attr('selected_label', item)
.appendTo(that.$listbox) .appendTo(that.$listbox);
.on('click', $.proxy(that.handle_click, that));
} }
}); });
@ -503,37 +503,50 @@ define([
} }
}, },
handle_click: function (e) { handle_change: function (e) {
/** /**
* Handle when a value is clicked. * Handle when a new value is selected.
* *
* Calling model.set will trigger all of the other views of the * Calling model.set will trigger all of the other views of the
* model to update. * model to update.
*/ */
this.model.set('selected_label', $(e.target).text(), {updated_view: this}); this.model.set('selected_label', this.$listbox.val(), {updated_view: this});
this.touch(); this.touch();
}, },
}); });
var SelectMultipleView = SelectView.extend({ var SelectMultipleView = SelectView.extend({
render: function(){ render: function(){
/**
* Called when view is rendered.
*/
SelectMultipleView.__super__.render.apply(this); SelectMultipleView.__super__.render.apply(this);
this.$el.removeClass('widget-select') this.$el.removeClass('widget-select')
.addClass('widget-select-multiple'); .addClass('widget-select-multiple');
this.$listbox.attr('multiple', true) this.$listbox.attr('multiple', true)
.on('input', $.proxy(this.handle_click, this)); .on('change', $.proxy(this.handle_change, this));
return this; return this;
}, },
update: function(){ update: function(){
/**
* Update the contents of this view
*
* Called when the model is changed. The model may have been
* changed by another view or by a state update from the back-end.
*/
SelectMultipleView.__super__.update.apply(this, arguments); SelectMultipleView.__super__.update.apply(this, arguments);
this.$listbox.val(this.model.get('selected_labels')); this.$listbox.val(this.model.get('selected_labels'));
}, },
handle_click: function (e) { handle_change: function (e) {
// Handle when a value is clicked. /**
* Handle when a new value is selected.
// Calling model.set will trigger all of the other views of the *
// model to update. * Calling model.set will trigger all of the other views of the
* model to update.
*/
this.model.set('selected_labels', this.model.set('selected_labels',
(this.$listbox.val() || []).slice(), (this.$listbox.val() || []).slice(),
{updated_view: this}); {updated_view: this});
@ -541,6 +554,7 @@ define([
}, },
}); });
return { return {
'DropdownView': DropdownView, 'DropdownView': DropdownView,
'RadioButtonsView': RadioButtonsView, 'RadioButtonsView': RadioButtonsView,