added support and tests for specifying the available options of a sel…

…ect control as an object literal
dzrw · Sep 24, 2012 · 3ba6f00 · 3ba6f00
1 parent 9db788d
commit 3ba6f00
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 9 deletions.
diff --git a/outback.js b/outback.js
@@ -1165,22 +1165,51 @@
 			return config;
 		}
 
+		function domUpdateDocumentFragment(element, value) {
+			var $el;
+			$el = $(value);
+
+			// If it's a script, unpack it.
+			if (($options = $el.filter('script')).size() > 0) {
+				$el = $($options.html());
+			}
+
+			// Otherwise, append the options and optgroups; or nothing.
+			if (($options = $el.filter('optgroup, option')).size() > 0) {
+				$(element).empty().append($options);
+			} else {
+				$(element).html(config.noContent);
+			}
+		}
+
+		function makeOption (m, k) {
+			var s;
+			s = m.label || 'undefined';
+			return $('<option></option>').attr({value: k}).text(s);
+		}
+
+		function domUpdateObject(element, mapping) {
+			var $el, options;
+			$el = $(element);
+			options = _.map(mapping, makeOption);
+			if (_.isEmpty(options)) {
+				$el.html(config.noContent);
+			} else {
+				$el.empty().append.apply($el, options);
+			}
+		}
+
 		return {
 			update: function (element, valueAccessor, allBindingsAccessor, view) {
 				var config, value, s, $options, $el;
 				config = optionsFor(valueAccessor, allBindingsAccessor);
 
 				value = valueAccessor()();
-				$el = $(value);
-
-				// If it's a script, unpack it.
-				if (($options = $el.filter('script')).size() > 0) {
-					$el = $($options.html());
-				}
 
-				// Otherwise, append the options and optgroups; or nothing.
-				if (($options = $el.filter('optgroup, option')).size() > 0) {
-					$(element).empty().append($options);
+				if (_.isString(value)) {
+					domUpdateDocumentFragment(element, value, config);
+				} else if (_.isObject(value)) {
+					domUpdateObject(element, value, config);
 				} else {
 					$(element).html(config.noContent);
 				}

diff --git a/spec/bindings/options.spec.js b/spec/bindings/options.spec.js
@@ -39,4 +39,62 @@ describe('the options binding', function() {
 		});
 	});
 
+	describe('should interpret an Object as a container of values and labels', function () {
+
+		beforeEach(function() {
+			this.model = new AModel({
+				transport: 'boat'
+			});
+			this.viewModel = new AModel({
+				transportOptions: {
+					'car': {label: 'Car'},
+					'boat': {label: 'Boat'},
+					'train': {label: 'Train'}
+				}
+			});
+			this.view = new FixtureView({model: this.model});
+			_.extend(this.view, {
+				viewModel: this.viewModel,
+				innerHtml: 
+				"<select data-bind='value: @transport' data-bind-view='options: @transportOptions'></select>"
+			});
+
+			this.view.render();
+			this.el = this.view.$('#anchor select');				
+		});
+
+		afterEach(function() {
+			this.view.remove();
+		});
+
+		it('should add options to the select control', function() {
+			expect(this.el.find('option').size()).toBe(3);
+		});
+
+		it('should set the correct initial value', function() {
+			expect(this.el.val()).toBe('boat');
+
+			var boat = this.el.find('option[value=boat]');
+
+			expect(boat.size() > 0).toBeTruthy();
+			expect(boat.is(':selected')).toBeTruthy();
+		});
+
+		it('should set the labels correctly', function() {
+			expect(this.el.val()).toBe('boat');
+
+			var pairs = _.map(this.el.find('option'), function (x) { 
+				var y = {};
+				y[$(x).attr('value')] = $(x).text();
+				return y; 
+			});
+
+			var b = _.every(this.viewModel.transportOptions, function (v, k) {
+				return !_.isUndefined(pairs[k]) && pairs[k] === v;
+			});
+
+			expect(b).toBeTruthy();
+		});		
+	});
+
 });