Knockout - Computed Observable

by Pratik Bhattachary

HTML

<script src=" https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-debug.js"></script>
<span data-bind="text: status"></span><br>
<button data-bind="click: changeOlStatus">Change Online Status</button><br>
<button data-bind="click: changeAuthStatus">Change Auth Status Status</button>

JavaScript

$(function() {
    var viewModel = {
        isAuthenticated: ko.observable(true),
        isOnline: ko.observable(true),
        changeOlStatus: function() {
            this.isOnline(!this.isOnline());
        },
        changeAuthStatus: function() {
            this.isAuthenticated(!this.isAuthenticated());
        }
    };
    viewModel.status = ko.computed(function() {
        return "Customer is "+(!this.isOnline()?"offline":"online")+" and "+(!this.isAuthenticated()?"not":"")+" authenticated";
    }, viewModel);
    //The 2nd parameter viewModel is being passed because we need to manage the this pointer in JavaScript
    
    ko.applyBindings(viewModel);
});