Two Way Binding On Attribute, Knockout.js

I have a button with a data-status attribute that is bind to a observable property in a viewmodel. When I click on the button the data-status attribute is changed. But it does not

Solution 1:

When working with KO, the idea is to change the viewModel and then the presentation will be changed. So when the user clicks on the button you should change the VM:

if your VM looks like this:

var vm = function () {
var self = this;
self.status=ko.observable(false);
self.toggleStatus=function(){ self.status(!self.status()); } 

}

your html should look like this:

<button id="changeStatus" data-bind="click: toggleStatus" />

if you have several buttons, you can change the function to get the obj:

var vm = function () {
var self = this;
self.status=ko.observable(false);
self.flag=ko.observable(false);
self.toggleStatus=function(data,event,obj){ self[obj](!self[obj]()); } 

}

<button data-bind="click: function(d,e){ togglebutton(d,e,'status');}" />
<button data-bind="click: function(d,e){ togglebutton(d,e,'flag');}" />

let me know if you need more info