copy children collection so merging oob node doesn't screw up iteration

fixes https://github.com/bigskysoftware/kutty/issues/4

3 files changed, 39 insertions, 1 deletions

diff --git a/src/kutty.js b/src/kutty.js
index a1ce98f1..bf70ee95 100644
--- a/src/kutty.js
+++ b/src/kutty.js
@@ -126,6 +126,16 @@ var kutty = kutty || (function () {
             return data;
         }
 
+        function toArray(arr) {
+            var returnArr = [];
+            if (arr) {
+                for (var i = 0; i < arr.length; i++) {
+                    returnArr.push(arr[i]);
+                }
+            }
+            return returnArr
+        }
+
         function forEach(arr, func) {
             if (arr) {
                 for (var i = 0; i < arr.length; i++) {
@@ -318,7 +328,7 @@ var kutty = kutty || (function () {
 
         function handleOutOfBandSwaps(fragment) {
             var settleTasks = [];
-            forEach(fragment.children, function (child) {
+            forEach(toArray(fragment.children), function (child) {
                 if (getAttributeValue(child, "kt-swap-oob") === "true") {
                     var target = getDocument().getElementById(child.id);
                     if (target) {
diff --git a/test/attributes/kt-swap-oob.js b/test/attributes/kt-swap-oob.js
index c59eacaf..7985b19b 100644
--- a/test/attributes/kt-swap-oob.js
+++ b/test/attributes/kt-swap-oob.js
@@ -18,6 +18,18 @@ describe("kt-swap-oob attribute", function () {
         byId("d1").innerHTML.should.equal("Swapped");
     })
 
+    it('handles more than one oob swap properly', function () {
+        this.server.respondWith("GET", "/test", "Clicked<div id='d1' kt-swap-oob='true'>Swapped1</div><div id='d2' kt-swap-oob='true'>Swapped2</div>");
+        var div = make('<div kt-get="/test">click me</div>');
+        make('<div id="d1"></div>');
+        make('<div id="d2"></div>');
+        div.click();
+        this.server.respond();
+        div.innerHTML.should.equal("Clicked");
+        byId("d1").innerHTML.should.equal("Swapped1");
+        byId("d2").innerHTML.should.equal("Swapped2");
+    })
+
     it('handles no id match properly', function () {
         this.server.respondWith("GET", "/test", "Clicked<div id='d1' kt-swap-oob='true'>Swapped</div>");
         var div = make('<div kt-get="/test">click me</div>');
diff --git a/test/core/regressions.js b/test/core/regressions.js
index 6ff675c4..45fa6778 100644
--- a/test/core/regressions.js
+++ b/test/core/regressions.js
@@ -18,5 +18,21 @@ describe("Core kutty Regression Tests", function(){
             '</svg>')
     });
 
+    it ('Handles https://github.com/bigskysoftware/kutty/issues/4 properly', function() {
+        this.server.respondWith("GET", "/index2a.php",
+            "<div id='message' kt-swap-oob='true'>I came from message oob swap I should be second</div>" +
+            "<div id='message2' kt-swap-oob='true'>I came from a message2 oob swap I should be third  but I am in the wrong spot</div>" +
+            "I'm page2 content (non-swap) I should be first")
+
+        var h1 = make("<h1 kt-get='/index2a.php' kt-target='#page2' kt-trigger='click'>Kutty CLICK ME</h1>" +
+            "<div id='page2' ></div>" +
+            "<div id='message'></div>" +
+            "<div id='message2'></div>")
+        h1.click();
+        this.server.respond();
+        kutty.find("#page2").innerHTML.should.equal("I'm page2 content (non-swap) I should be first")
+        kutty.find("#message").innerHTML.should.equal("I came from message oob swap I should be second")
+        kutty.find("#message2").innerHTML.should.equal("I came from a message2 oob swap I should be third  but I am in the wrong spot")
+    });
 
 })