Permalink
Browse files

Fix issue #188 (ko.utils.parseHtmlFragment incorrect on IE < 9 if sub…

…elements contain leading comment nodes)
  • Loading branch information...
1 parent 55fd090 commit 664886162ac08483f0bc5391857d0ef8a0272de3 @SteveSanderson SteveSanderson committed Nov 4, 2011
Showing with 13 additions and 16 deletions.
  1. +10 −1 spec/templatingBehaviors.js
  2. +3 −15 src/utils.domManipulation.js
View
11 spec/templatingBehaviors.js
@@ -658,5 +658,14 @@ describe('Templating', {
testNode.innerHTML = "Start <!-- ko template: { data: someData } -->Childprop: [js: childProp]<!-- /ko --> End";
ko.applyBindings({ someData: { childProp: 'abc' } }, testNode);
value_of(testNode).should_contain_html("start <!-- ko template: { data: somedata } --><div>childprop: abc</div><!-- /ko -->end");
- }
+ },
+
+ 'Should be able to use anonymous templates that contain first-child comment nodes': function() {
+ // This represents issue https://github.com/SteveSanderson/knockout/issues/188
+ // (IE < 9 strips out leading comment nodes when you use .innerHTML)
+ ko.setTemplateEngine(new dummyTemplateEngine({}));
+ testNode.innerHTML = "start <div data-bind='foreach: [1,2]'><span><!-- leading comment -->hello</span></div>";
+ ko.applyBindings(null, testNode);
+ value_of(testNode).should_contain_html('start <div data-bind="foreach: [1,2]"><span><!-- leading comment -->hello</span><span><!-- leading comment -->hello</span></div>');
+ }
})
View
18 src/utils.domManipulation.js
@@ -5,19 +5,6 @@
// Based on jQuery's "clean" function, but only accounting for table-related elements.
// If you have referenced jQuery, this won't be used anyway - KO will use jQuery's "clean" function directly
- // Trim any leading whitespace/comment nodes, otherwise IE < 9 will discard them. We'll need to restore them after.
- html = html || "";
- var prefixNodes = [];
- while (html.match(leadingCommentRegex)) {
- html = html.replace(leadingCommentRegex, function() {
- var whitespace = arguments[1], comment = arguments[2];
- if (whitespace)
- prefixNodes.push(document.createTextNode(whitespace));
- prefixNodes.push(document.createComment(comment));
- return "";
- });
- }
-
// Note that there's still an issue in IE < 9 whereby it will discard comment nodes that are the first child of
// a descendant node. For example: "<div><!-- mycomment -->abc</div>" will get parsed as "<div>abc</div>"
// This won't affect anyone who has referenced jQuery, and there's always the workaround of inserting a dummy node
@@ -33,13 +20,14 @@
/* anything else */ [0, "", ""];
// Go to html and back, then peel off extra wrappers
- div.innerHTML = wrap[1] + html + wrap[2];
+ // Note that we always prefix with some dummy text, because otherwise, IE<9 will strip out leading comment nodes in descendants. Total madness.
+ div.innerHTML = "ignored<div>" + wrap[1] + html + wrap[2] + "</div>";
// Move to the right depth
while (wrap[0]--)
div = div.lastChild;
- return prefixNodes.concat(ko.utils.makeArray(div.childNodes));
+ return ko.utils.makeArray(div.lastChild.childNodes);
}
ko.utils.parseHtmlFragment = function(html) {

0 comments on commit 6648861

Please sign in to comment.