使用敲除JS时出现错误

Question

I work with knockoutJS and I have an error when I want close a block div or h html tag. My Javascript code where the error occurs:

function myModel(){
this.flags = false;
    this.getFlag = ko.computed(function(){
        if(this.flags == false){
            this.flags = true;
        }else{
            this.flags = false;
        }
        console.log(this.flags);
        return this.flags;
    });
}
ko.applyBindings(new myModel());

My HTML:

<button data-bind="click: getFlag">Click button</button>
<h3 data-bind="visible: getFlag()">test visible</h3>

When I click my button I have this message in the browser console:

false Uncaught Error: Cannot write a value to a ko.computed unless you specify a 'write' option. If you wish to read the current value, don't pass any parameters.knockout-3.3.0.js:44 gknockout-3.3.0.js:83 (anonymous function)

When I write my javascript code without function ko.computed()

    this.flags = false;
    this.getFlag = function(){
        if(this.flags == false){
            this.flags = true;
        }else{
            this.flags = false;
        }
        console.log(this.flags);   
        return this.flags;
    };

I have this message in browser console:

true

When I press the button I have false , and etc true false true false but visible doesn't work. What is the problem?

Answer 1

So first you need to declare your properties as observable:

var self = this;
self.flag = ko.observable(false);

Next we'll make a toggle to switch the flag back and forth:

self.toggleFlag = function(){
   self.flag(!self.flag());
}

Now you can bind:

<button data-bind="click: toggleFlag">Click button</button>
<h3 data-bind="visible: flag">test visible</h3>