Implement containerless text binding

thbar · Jun 15, 2012 · 56dbc8a · 56dbc8a
1 parent de95292
commit 56dbc8a
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 5 deletions.
diff --git a/spec/defaultBindingsBehaviors.js b/spec/defaultBindingsBehaviors.js
@@ -93,6 +93,31 @@ describe('Binding: Text', {
         ko.applyBindings(null, testNode);
         var actualText = "textContent" in testNode.childNodes[0] ? testNode.childNodes[0].textContent : testNode.childNodes[0].innerText;
         value_of(actualText).should_be("");
+    },
+
+    'Should work with virtual elements, adding a text node between the comments': function () {
+        var observable = ko.observable("Some text");
+        testNode.innerHTML = "xxx <!-- ko text: textProp --><!-- /ko -->";
+        ko.applyBindings({textProp: observable}, testNode);
+        value_of(testNode).should_contain_text("xxx Some text");
+        value_of(testNode).should_contain_html("xxx <!-- ko text: textprop -->some text<!-- /ko -->");
+
+        // update observable; should update text
+        observable("New text");
+        value_of(testNode).should_contain_text("xxx New text");
+        value_of(testNode).should_contain_html("xxx <!-- ko text: textprop -->new text<!-- /ko -->");
+
+        // clear observable; should remove text
+        observable(undefined);
+        value_of(testNode).should_contain_text("xxx ");
+        value_of(testNode).should_contain_html("xxx <!-- ko text: textprop --><!-- /ko -->");
+    },
+
+    'Should work with virtual elements, removing any existing stuff between the comments': function () {
+        testNode.innerHTML = "xxx <!--ko text: undefined-->some random thing<span> that won't be here later</span><!--/ko-->";
+        ko.applyBindings(null, testNode);
+        value_of(testNode).should_contain_text("xxx ");
+        value_of(testNode).should_contain_html("xxx <!--ko text: undefined--><!--/ko-->");
     }
 });
 

diff --git a/src/binding/defaultBindings.js b/src/binding/defaultBindings.js
@@ -318,6 +318,7 @@ ko.bindingHandlers['text'] = {
         ko.utils.setTextContent(element, valueAccessor());
     }
 };
+ko.virtualElements.allowedBindings['text'] = true;
 
 ko.bindingHandlers['html'] = {
     'init': function() {

diff --git a/src/utils.js b/src/utils.js
@@ -302,13 +302,31 @@ ko.utils = new (function () {
             if ((value === null) || (value === undefined))
                 value = "";
 
-            'innerText' in element ? element.innerText = value
-                                   : element.textContent = value;
+            if (element.nodeType == 8) {
+                // For virtual elements, we need there to be exactly one virtual child: a text node.
+                // If there are no virtual children, more than one, or if it's not a text node, we'll clear everything out first.
+                var innerTextNode = ko.virtualElements.firstChild(element);
+                if (!innerTextNode || innerTextNode.nodeType != 3 || ko.virtualElements.nextSibling(innerTextNode)) {
+                    innerTextNode = document.createTextNode("");
+                    ko.virtualElements.setDomNodeChildren(element, [innerTextNode]);
+                }
+                innerTextNode.data = value;
+            } else {
+                // Even though the above code path would technically work for regular elements too, the following is faster
+                'innerText' in element ? element.innerText = value
+                                       : element.textContent = value;
+            }
+
+            ko.utils.forceRefresh(element);
+        },
 
+        forceRefresh: function(node) {
+            // Workaround for an IE9 rendering bug - https://github.com/SteveSanderson/knockout/issues/209
             if (ieVersion >= 9) {
-                // Believe it or not, this actually fixes an IE9 rendering bug
-                // (See https://github.com/SteveSanderson/knockout/issues/209)
-                element.style.display = element.style.display;
+                // For text nodes and comment nodes (most likely virtual elements), we will have to refresh the container
+                var elem = node.nodeType == 1 ? node : node.parentNode;
+                if (elem.style)
+                    elem.style.display = elem.style.display;
             }
         },