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()) }); + } +};