data-bind not working for conditional display of a div

Question

I have the following very simple code sample to test the conditional display of a div. For some reason it's not working and I was wondering if anyone had encountered it. I'm using knockout-3.0.0.js.

Here is my HTML

<div data-bind="if: displayDetail">
    HERE IS THE DETAIL <label data-bind="text: displayDetail"></label>
</div>

<div data-bind="ifnot: displayDetail">
    THERE IS NO DETAIL <label data-bind="text: displayDetail"></label>
</div>
<button data-bind='click: flip'>Flip</button>

and here is my Javascript

function BooleanViewModel() {
var self = this;
self.displayDetail = ko.observable(false);

// Operations
self.flip = function() {
    //alert("val is " + self.displayDetail);
    if(self.displayDetail){
        self.displayDetail = false;
    }else{
        self.displayDetail = true;        
    }
};

}
ko.applyBindings(new BooleanViewModel());

Kindly let me know if you see anything that I have missed

Answer 1

Each observable is a function so to get or set value you should use () :

self.flip = function() {
    //alert("val is " + self.displayDetail());
    if(self.displayDetail()){
        self.displayDetail(false);
    }else{
        self.displayDetail(true);        
    }
};