Hidden binding

knockout · Apr 8, 2017 · c29a923 · c29a923
1 parent 241c26c
commit c29a923
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 32 deletions.
diff --git a/build/fragments/source-references.js b/build/fragments/source-references.js
@@ -44,7 +44,7 @@ knockoutDebugCallback([
     'src/binding/defaultBindings/textInput.js',
     'src/binding/defaultBindings/uniqueName.js',
     'src/binding/defaultBindings/value.js',
-    'src/binding/defaultBindings/visible.js',
+    'src/binding/defaultBindings/visibleHidden.js',
     // click depends on event - The order matters for specs, which includes each file individually
     'src/binding/defaultBindings/click.js',
     'src/templating/templateEngine.js',

diff --git a/spec/defaultBindings/visibleBehaviors.js b/spec/defaultBindings/visibleBehaviors.js
diff --git a/spec/defaultBindings/visibleHiddenBehaviors.js b/spec/defaultBindings/visibleHiddenBehaviors.js
@@ -0,0 +1,37 @@
+describe('Binding: Visible/Hidden', function() {
+    beforeEach(jasmine.prepareTestNode);
+
+    it('Visible means the node is only visible when the value is true', function () {
+        var observable = new ko.observable(false);
+        testNode.innerHTML = "<input data-bind='visible:myModelProperty()' />";
+        ko.applyBindings({ myModelProperty: observable }, testNode);
+
+        expect(testNode.childNodes[0].style.display).toEqual("none");
+        observable(true);
+        expect(testNode.childNodes[0].style.display).toEqual("");
+    });
+
+    it('Visible should unwrap observables implicitly', function () {
+        var observable = new ko.observable(false);
+        testNode.innerHTML = "<input data-bind='visible:myModelProperty' />";
+        ko.applyBindings({ myModelProperty: observable }, testNode);
+        expect(testNode.childNodes[0].style.display).toEqual("none");
+    });
+
+    it('Hidden means the node is only visible when the value is false', function () {
+        var observable = new ko.observable(false);
+        testNode.innerHTML = "<input data-bind='hidden:myModelProperty()' />";
+        ko.applyBindings({ myModelProperty: observable }, testNode);
+
+        expect(testNode.childNodes[0].style.display).toEqual("");
+        observable(true);
+        expect(testNode.childNodes[0].style.display).toEqual("none");
+    });
+
+    it('Hidden should unwrap observables implicitly', function () {
+        var observable = new ko.observable(true);
+        testNode.innerHTML = "<input data-bind='hidden:myModelProperty' />";
+        ko.applyBindings({ myModelProperty: observable }, testNode);
+        expect(testNode.childNodes[0].style.display).toEqual("none");
+    });
+});
diff --git a/spec/runner.html b/spec/runner.html
@@ -71,7 +71,7 @@
         <script type="text/javascript" src="defaultBindings/textInputBehaviors.js"></script>
         <script type="text/javascript" src="defaultBindings/uniqueNameBehaviors.js"></script>
         <script type="text/javascript" src="defaultBindings/valueBehaviors.js"></script>
-        <script type="text/javascript" src="defaultBindings/visibleBehaviors.js"></script>
+        <script type="text/javascript" src="defaultBindings/visibleHiddenBehaviors.js"></script>
         <script type="text/javascript" src="defaultBindings/withBehaviors.js"></script>
 
         <script type="text/javascript" src="crossWindowBehaviors.js"></script>

diff --git a/src/binding/defaultBindings/visible.js → src/binding/defaultBindings/visibleHidden.js b/src/binding/defaultBindings/visible.js → src/binding/defaultBindings/visibleHidden.js
@@ -1,10 +1,16 @@
-ko.bindingHandlers['visible'] = {
-    'update': function (element, valueAccessor) {
-        var value = ko.utils.unwrapObservable(valueAccessor());
-        var isCurrentlyVisible = !(element.style.display == "none");
-        if (value && !isCurrentlyVisible)
-            element.style.display = "";
-        else if ((!value) && isCurrentlyVisible)
-            element.style.display = "none";
-    }
-};
+ko.bindingHandlers['visible'] = {
+    'update': function (element, valueAccessor) {
+        var value = ko.utils.unwrapObservable(valueAccessor());
+        var isCurrentlyVisible = !(element.style.display == "none");
+        if (value && !isCurrentlyVisible)
+            element.style.display = "";
+        else if ((!value) && isCurrentlyVisible)
+            element.style.display = "none";
+    }
+};
+
+ko.bindingHandlers['hidden'] = {
+    'update': function (element, valueAccessor) {
+        ko.bindingHandlers['visible']['update'](element, function() { return !ko.utils.unwrapObservable(valueAccessor()) });
+    }
+};