diff --git a/build/fragments/source-references.js b/build/fragments/source-references.js
index 6c8d8e3f7..ec5e86b81 100644
--- a/build/fragments/source-references.js
+++ b/build/fragments/source-references.js
@@ -45,7 +45,7 @@ knockoutDebugCallback([
'src/binding/defaultBindings/uniqueName.js',
'src/binding/defaultBindings/using.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
deleted file mode 100644
index a624f1019..000000000
--- a/spec/defaultBindings/visibleBehaviors.js
+++ /dev/null
@@ -1,20 +0,0 @@
-describe('Binding: Visible', function() {
- beforeEach(jasmine.prepareTestNode);
-
- it('Should display the node only when the value is true', function () {
- var observable = new ko.observable(false);
- testNode.innerHTML = "";
- ko.applyBindings({ myModelProperty: observable }, testNode);
-
- expect(testNode.childNodes[0].style.display).toEqual("none");
- observable(true);
- expect(testNode.childNodes[0].style.display).toEqual("");
- });
-
- it('Should unwrap observables implicitly', function () {
- var observable = new ko.observable(false);
- testNode.innerHTML = "";
- ko.applyBindings({ myModelProperty: observable }, testNode);
- expect(testNode.childNodes[0].style.display).toEqual("none");
- });
-});
\ No newline at end of file
diff --git a/spec/defaultBindings/visibleHiddenBehaviors.js b/spec/defaultBindings/visibleHiddenBehaviors.js
new file mode 100644
index 000000000..0bf420cd9
--- /dev/null
+++ 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 = "";
+ 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 = "";
+ 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 = "";
+ 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 = "";
+ ko.applyBindings({ myModelProperty: observable }, testNode);
+ expect(testNode.childNodes[0].style.display).toEqual("none");
+ });
+});
\ No newline at end of file
diff --git a/spec/runner.html b/spec/runner.html
index c8baf6bb3..57219e25f 100755
--- a/spec/runner.html
+++ b/spec/runner.html
@@ -72,7 +72,7 @@
-
+
diff --git a/src/binding/defaultBindings/visible.js b/src/binding/defaultBindings/visibleHidden.js
similarity index 63%
rename from src/binding/defaultBindings/visible.js
rename to src/binding/defaultBindings/visibleHidden.js
index 8a802f521..fc6087dd4 100755
--- a/src/binding/defaultBindings/visible.js
+++ b/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()) });
+ }
+};