Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

#440 and #144 (foreach, re-written template, data-bind)

Add spec to show that foreach correctly handles templates where first node has a binding.
Add secondary fix for #440, which will solve the original bug in a different way and possibly prevent other problems down the road.
  • Loading branch information...
commit 98ffbd08ef7bc63062f283df39880ba337ccf531 1 parent 76ab9ea
@mbest mbest authored
18 spec/templatingBehaviors.js
@@ -365,6 +365,24 @@ describe('Templating', {
value_of(initCalls).should_be(3); // 3 because there were 3 items in myCollection
+ 'Data binding \'foreach\' should handle templates in which the very first node has a binding': function() {
+ // Represents
+ // Previously, the rewriting (which introduces a comment node before the bound node) was interfering
+ // with the array-to-DOM-node mapping state tracking
+ ko.setTemplateEngine(new dummyTemplateEngine({ mytemplate: "<div data-bind='text: $data'></div>" }));
+ testNode.innerHTML = "<div data-bind=\"template: { name: 'mytemplate', foreach: items }\"></div>";
+ // Bind against initial array containing one entry. UI just shows "original"
+ var myArray = ko.observableArray(["original"]);
+ ko.applyBindings({ items: myArray });
+ value_of(testNode.childNodes[0]).should_contain_html("<div>original</div>");
+ // Now replace the entire array contents with one different entry.
+ // UI just shows "new" (previously with bug, showed "original" AND "new")
+ myArray(["new"]);
+ value_of(testNode.childNodes[0]).should_contain_html("<div>new</div>");
+ },
'Data binding \'foreach\' option should apply bindings with an $index in the context': function () {
var myArray = new ko.observableArray([{ personName: "Bob" }, { personName: "Frank"}]);
ko.setTemplateEngine(new dummyTemplateEngine({ itemTemplate: "The item # is <span data-bind='text: $index'></span>" }));
4 src/binding/editDetection/arrayToDomNodeChildren.js
@@ -11,6 +11,10 @@
// You can use this, for example, to activate bindings on those nodes.
function fixUpVirtualElements(contiguousNodeArray) {
+ // Remove any initial nodes that aren't in the document
+ while (contiguousNodeArray.length && !ko.utils.domNodeIsAttachedToDocument(contiguousNodeArray[0]))
+ contiguousNodeArray.splice(0, 1);
// Ensures that contiguousNodeArray really *is* an array of contiguous siblings, even if some of the interior
// ones have changed since your array was first built (e.g., because your array contains virtual elements, and
// their virtual children changed when binding was applied to them).
Please sign in to comment.
Something went wrong with that request. Please try again.