Fix issue knockout#88 - optionsText should HTML-encode text content o…

…f <OPTION> nodes
mbbx6spp · May 15, 2011 · f2ee36d · f2ee36d
1 parent a64b88a
commit f2ee36d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/spec/defaultBindingsBehaviors.js b/spec/defaultBindingsBehaviors.js
@@ -378,12 +378,12 @@ describe('Binding: Options', {
     'Should accept function in optionsText param to display subproperties of the model values': function() {
         var modelValues = new ko.observableArray([
             { name: 'bob', job: 'manager' }, 
-            { name: 'frank', job: 'coder' }
+            { name: 'frank', job: 'coder & tester' }
         ]);	
         testNode.innerHTML = "<select data-bind='options:myValues, optionsText: function (v) { return v[\"name\"] + \" (\" + v[\"job\"] + \")\"; }, optionsValue: \"id\"'><option>should be deleted</option></select>";
         ko.applyBindings({ myValues: modelValues }, testNode);
-        var displayedText = ko.utils.arrayMap(testNode.childNodes[0].childNodes, function (node) { return node.innerHTML; });	
-        value_of(displayedText).should_be(["bob (manager)", "frank (coder)"]);
+        var displayedText = ko.utils.arrayMap(testNode.childNodes[0].childNodes, function (node) { return node.innerText || node.textContent; });	
+        value_of(displayedText).should_be(["bob (manager)", "frank (coder & tester)"]);
     },
 
     'Should update the SELECT node\'s options if the model changes': function () {

diff --git a/src/binding/defaultBindings.js b/src/binding/defaultBindings.js
@@ -197,21 +197,26 @@ ko.bindingHandlers['options'] = {
             }
             for (var i = 0, j = value.length; i < j; i++) {
                 var option = document.createElement("OPTION");
+
+                // Apply a value to the option element
                 var optionValue = typeof allBindings['optionsValue'] == "string" ? value[i][allBindings['optionsValue']] : value[i];
+                optionValue = ko.utils.unwrapObservable(optionValue);
+                ko.selectExtensions.writeValue(option, optionValue);
 
-                // Pick some text to appear in the drop-down list for this data value
+                // Apply some text to the option element
                 var optionsTextValue = allBindings['optionsText'];
                 if (typeof optionsTextValue == "function")
                     optionText = optionsTextValue(value[i]); // Given a function; run it against the data value
                 else if (typeof optionsTextValue == "string")
                     optionText = value[i][optionsTextValue]; // Given a string; treat it as a property name on the data value
                 else
                     optionText = optionValue;				 // Given no optionsText arg; use the data value itself
-
-                optionValue = ko.utils.unwrapObservable(optionValue);
-                optionText = ko.utils.unwrapObservable(optionText);
-                ko.selectExtensions.writeValue(option, optionValue);
-                option.innerHTML = optionText.toString();
+                if ((optionText === null) || (optionText === undefined))
+                    optionText = "";                                    
+                optionText = ko.utils.unwrapObservable(optionText).toString();
+                typeof option.innerText == "string" ? option.innerText = optionText
+                                                    : option.textContent = optionText;
+
                 element.appendChild(option);
             }