JSFiddle - React, Tailwind, and code Playground

by nyothecat

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<button data-bind='click: updateValue'>Update</button>
<p data-bind='text: someValue.history'></p>

JavaScript

ko.extenders.keepHistory = function(target, option) {
    target.subscribe(function(newValue) {
       if(!target.history) target.history = ko.observableArray();
       target.history.push(newValue);
       console.log(target.history());
    });
    return target;
};

var vm1 = function (name) {
    this.name = name;
    this.version = 1;
    this.toLogString = function () {
        return name;
    }
}

var vm = function () {
    var self = this;
    this.someValue = ko.observable(new vm1("My vm1")).extend({keepHistory: true});
    this.updateValue = function () {
        var currentValue = self.someValue();
        currentValue.version++;
        self.someValue(currentValue);
    }
}

var vmi = new vm();

ko.applyBindings(vmi);