as: binding can be used with with:

knockout · Oct 20, 2017 · 11182a3 · 11182a3
1 parent d7fc725
commit 11182a3
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 3 deletions.
diff --git a/spec/defaultBindings/withBehaviors.js b/spec/defaultBindings/withBehaviors.js
@@ -134,6 +134,40 @@ describe('Binding: With', function() {
         expect(ko.contextFor(firstSpan).$parents[1].name).toEqual("top");
     });
 
+    it('Should be able to access all parent binding when using `as:`', function() {
+        testNode.innerHTML = "<div data-bind='with: topItem'>" +
+                                "<div data-bind='with: middleItem, as: \"middle\"'>" +
+                                    "<div data-bind='with: bottomItem'>" +
+                                        "<span data-bind='text: name'></span>" +
+                                        "<span data-bind='text: $parent.name'></span>" +
+                                        "<span data-bind='text: middle.name'></span>" +
+                                        "<span data-bind='text: $parents[1].name'></span>" +
+                                        "<span data-bind='text: $parents[2].name'></span>" +
+                                        "<span data-bind='text: $root.name'></span>" +
+                                    "</div>" +
+                                "</div>" +
+                              "</div>";
+        ko.applyBindings({
+            name: 'outer',
+            topItem: {
+                name: 'top',
+                middleItem: {
+                    name: 'middle',
+                    bottomItem: {
+                        name: "bottom"
+                    }
+                }
+            }
+        }, testNode);
+        var finalContainer = testNode.childNodes[0].childNodes[0].childNodes[0];
+        expect(finalContainer.childNodes[0]).toContainText("bottom");
+        expect(finalContainer.childNodes[1]).toContainText("middle");
+        expect(finalContainer.childNodes[2]).toContainText("middle");
+        expect(finalContainer.childNodes[3]).toContainText("top");
+        expect(finalContainer.childNodes[4]).toContainText("outer");
+        expect(finalContainer.childNodes[5]).toContainText("outer");
+    });
+
     it('Should be able to define an \"with\" region using a containerless template', function() {
         var someitem = ko.observable(undefined);
         testNode.innerHTML = "hello <!-- ko with: someitem --><span data-bind=\"text: occasionallyexistentchildprop\"></span><!-- /ko --> goodbye";
@@ -324,4 +358,4 @@ describe('Binding: With', function() {
 
         ko.bindingProvider.instance = originalBindingProvider;
     });
-});
+});
diff --git a/src/binding/defaultBindings/ifIfnotWith.js b/src/binding/defaultBindings/ifIfnotWith.js
@@ -23,7 +23,7 @@ function makeWithIfBinding(bindingKey, isWith, isNot) {
                         ko.virtualElements.setDomNodeChildren(element, renderNodes = ko.utils.cloneNodes(savedNodes));
                     }
                     var newContext = isWith ?
-                            bindingContext['createChildContext'](typeof rawWithValue == "function" ? rawWithValue : valueAccessor) :
+                            bindingContext['createChildContext'](typeof rawWithValue == "function" ? rawWithValue : valueAccessor, allBindings.get('as')) :
                             ifCondition.isActive() ?
                                 bindingContext['extend'](function() { ifCondition(); return null; }) :
                                 bindingContext;
@@ -46,4 +46,4 @@ function makeWithIfBinding(bindingKey, isWith, isNot) {
 // Construct the actual binding handlers
 makeWithIfBinding('if');
 makeWithIfBinding('ifnot', false /* isWith */, true /* isNot */);
-makeWithIfBinding('with', true /* isWith */);
+makeWithIfBinding('with', true /* isWith */, false /* isNot */);