Fix for simple version of issue knockout#98

antis · May 12, 2011 · e1473e8 · e1473e8
1 parent 155c8d0
commit e1473e8
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 4 deletions.
diff --git a/build/source-references.js b/build/source-references.js
@@ -4,6 +4,7 @@ knockoutDebugCallback([
     'src/utils.js',
     'src/utils.domData.js',
     'src/utils.domNodeDisposal.js',
+    'src/utils.domManipulation.js',
     'src/memoization.js',    
     'src/subscribables/subscribable.js',
     'src/subscribables/dependencyDetection.js',

diff --git a/spec/defaultBindingsBehaviors.js b/spec/defaultBindingsBehaviors.js
@@ -118,7 +118,17 @@ describe('Binding: HTML', {
         testNode.innerHTML = "<span data-bind='html:undefined' ></span>";
         ko.applyBindings(null, testNode);
         value_of(testNode.childNodes[0].innerHTML).should_be("");
-    }	    	
+    },
+
+    'Should be able to write arbitrary HTML, even if it is not semantically correct': function() {
+        // Represents issue #98 (https://github.com/SteveSanderson/knockout/issues/98)
+        // IE 8 and earlier is excessively strict about the use of .innerHTML - it throws
+        // if you try to write a <P> tag inside an existing <P> tag, for example.
+        var model = { textProp: "<p>hello</p><li>this isn't semantically correct</li>" };
+        testNode.innerHTML = "<p data-bind='html:textProp'></p>";
+        ko.applyBindings(model, testNode);
+        value_of(testNode.childNodes[0]).should_contain_html(model.textProp);
+    }
 });
 
 describe('Binding: Value', {

diff --git a/src/binding/defaultBindings.js b/src/binding/defaultBindings.js
@@ -275,9 +275,7 @@ ko.bindingHandlers['text'] = {
 ko.bindingHandlers['html'] = {
     'update': function (element, valueAccessor) {
         var value = ko.utils.unwrapObservable(valueAccessor());
-        if ((value === null) || (value === undefined))
-            value = "";
-        element.innerHTML = value;
+        ko.utils.setHtml(element, value);
     }
 };
 

diff --git a/src/utils.domManipulation.js b/src/utils.domManipulation.js
@@ -0,0 +1,15 @@
+(function () {
+    ko.utils.setHtml = function(node, html) {
+        ko.utils.emptyDomNode(node);
+
+        if ((html !== null) && (html !== undefined)) {
+            if (typeof html != 'string')
+                html = html.toString();
+
+            var dummy = document.createElement("div");
+            dummy.innerHTML = html;
+            while (dummy.firstChild)
+                node.appendChild(dummy.firstChild);
+        }    	
+    };
+})();