strip leading/trailing whitespace from named templates, as it can cau…

…se issues with sortable
rniemeyer · Sep 10, 2014 · af3c42c · af3c42c
1 parent e8f3516
commit af3c42c
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 6 deletions.
diff --git a/spec/knockout-sortable.spec.js b/spec/knockout-sortable.spec.js
@@ -140,6 +140,73 @@ describe("knockout-sortable", function(){
                 expect(children.eq(2).text()).toEqual("3");
             });
 
+            it("should strip leading and trailing whitespace characters from a template in a textarea", function() {
+                var children,
+                    options = {
+                        elems: $("<ul data-bind='sortable: { template: \"itemTmpl\", data: items }'></ul>"),
+                        vm: { items: ko.observableArray([1, 2, 3]) }
+                    };
+
+                $("body").append("<textarea id='itemTmpl'>   \n   <li data-bind='text: $data'></li>     \n     </textarea>");
+
+                setup(options);
+
+                $("body").remove("#itemTmpl");
+
+                children = options.root.contents();
+
+                expect(children.length).toEqual(3);
+                expect(children.eq(0).text()).toEqual("1");
+                expect(children.eq(1).text()).toEqual("2");
+                expect(children.eq(2).text()).toEqual("3");
+            });
+
+            it("should strip leading and trailing whitespace characters from a template in an element", function() {
+                var children,
+                    options = {
+                        elems: $("<ul data-bind='sortable: { template: \"itemTmpl\", data: items }'></ul>"),
+                        vm: { items: ko.observableArray([1, 2, 3]) }
+                    };
+
+                $("body").append("<div id='itemTmpl'>   \n   <li data-bind='text: $data'></li>     \n     </div>");
+
+                setup(options);
+
+                $("body").remove("#itemTmpl");
+
+                children = options.root.contents();
+
+                expect(children.length).toEqual(3);
+                expect(children.eq(0).text()).toEqual("1");
+                expect(children.eq(1).text()).toEqual("2");
+                expect(children.eq(2).text()).toEqual("3");
+            });
+
+            it("should strip leading and trailing whitespace characters from a template in a script", function() {
+                var children, script,
+                    options = {
+                        elems: $("<ul data-bind='sortable: { template: \"itemTmpl\", data: items }'></ul>"),
+                        vm: { items: ko.observableArray([1, 2, 3]) }
+                    };
+
+                script = document.createElement("script");
+                script.id = "itemTmpl";
+                script.type = "text/html";
+                script.text = "   \n   <li data-bind='text: $data'></li>     \n     ";
+                $("body").append(script);
+
+                setup(options);
+
+                $("body").remove("#itemTmpl");
+
+                children = options.root.contents();
+
+                expect(children.length).toEqual(3);
+                expect(children.eq(0).text()).toEqual("1");
+                expect(children.eq(1).text()).toEqual("2");
+                expect(children.eq(2).text()).toEqual("3");
+            });
+
             describe("when using 'as' to name the context", function() {
                 it("should allow referring to child items by 'as' name", function() {
                     var children,

diff --git a/src/knockout-sortable.js b/src/knockout-sortable.js
@@ -77,6 +77,29 @@
         return index;
     };
 
+    //remove problematic leading/trailing whitespace from templates
+    var stripTemplateWhitespace = function(element, name) {
+        var templateSource,
+            templateElement;
+
+        //process named templates
+        if (name) {
+            templateElement = document.getElementById(name);
+            if (templateElement) {
+                templateSource = new ko.templateSources.domElement(templateElement);
+                templateSource.text($.trim(templateSource.text()));
+            }
+        }
+        else {
+            //remove leading/trailing non-elements from anonymous templates
+            $(element).contents().each(function() {
+                if (this && this.nodeType !== 1) {
+                    element.removeChild(this);
+                }
+            });
+        }
+    };
+
     //connect items with observableArrays
     ko.bindingHandlers.sortable = {
         init: function(element, valueAccessor, allBindingsAccessor, data, context) {
@@ -86,12 +109,7 @@
                 sortable = {},
                 startActual, updateActual;
 
-            //remove leading/trailing non-elements from anonymous templates
-            $element.contents().each(function() {
-                if (this && this.nodeType !== 1) {
-                    element.removeChild(this);
-                }
-            });
+            stripTemplateWhitespace(element, templateOptions.name);
 
             //build a new object that has the global options with overrides from the binding
             $.extend(true, sortable, ko.bindingHandlers.sortable);