Change the observable to another on the html dynamically - html

Question

I'm trying to update the observable on the html by changing the visibility, I thought it should update the binding but is not happening, is there another way to update the binding?
// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
this.isVisible = ko.observable(true);
this.counter0 = ko.observable(0);
this.counter1 = ko.observable(0);
this.counterDisplay = this.counter0;
this.add = function() {
console.log(this.counterDisplay());
const newValue = this.counterDisplay() + 1;
this.counterDisplay(newValue);
};
this.changeCounter = () => {
this.isVisible(!this.isVisible());
if(this.counterDisplay === this.counter0) {
this.counterDisplay = this.counter1;
console.log('change to counter1');
} else {
this.counterDisplay = this.counter0;
console.log('change to counter0');
}
this.isVisible(true);
}
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<p>Counter Main: <div data-bind="text: counterDisplay, visible: isVisible"></div></p>
<button data-bind="click: add">Add</button>
<button data-bind="click: changeCounter">Change</button>
<p>Counter0: <div data-bind="text: counter0"></div></p>
<p>Counter1: <div data-bind="text: counter1"></div></p>
On the example the counter main is displaying the value for counter 0, but after click on Change button the counter main should change to display the counter1 value, I thought that changing the visibility should re-render the DOM and bind to the counter1 value but it remains with the counter0 binding.

Answer 1

Visibility binding does not affect bindings itself, it only changes DOM element display status.
Changing binding can be achieved by using ko.cleanNode(DOMElement) but it should only be used if you really need to rebuild binding completely, which is not the case 99 times of 100.
In your case it is easier to simply create an observable which stores the index of active counter and a computed which displays active counter value. See the code below.
// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
const self = this;
self.activeCounterIndex = ko.observable('0');
self.counter0 = ko.observable(0);
self.counter1 = ko.observable(0);
this.activeCounterValue = ko.computed(function(){
return self['counter'+self.activeCounterIndex()]();
});
this.add = function() {
const newValue = self['counter'+self.activeCounterIndex()]() + 1;
self['counter'+self.activeCounterIndex()](newValue);
};
this.changeCounter = () => {
if (self.activeCounterIndex() === '0') {
self.activeCounterIndex('1');
} else {
self.activeCounterIndex('0');
}
}
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<p>Active counter (#<span data-bind="text:activeCounterIndex"></span>): <b data-bind="text: activeCounterValue"></b></p>
<button data-bind="click: add">Increment active counter</button>
<button data-bind="click: changeCounter">Swich counter</button>
<p>Counter #0: <span data-bind="text: counter0"></span></p>
<p>Counter #1: <span data-bind="text: counter1"></span></p>