JSFiddle - React, Tailwind, and code Playground

by David Freire

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<input type="button" data-bind="click:addElement" value="Add element in array" />

</br>
<!-- ko foreach: logEntries -->
<!-- ko text: $data --> <!-- /ko -->
</br>
<!-- /ko -->

JavaScript

var viewModel = function(){
    var self = this;
 	self.items = ko.observableArray([]);
    self.logEntries = ko.observableArray([]);
    
    self.addElement = function(){
                debugger;
    	self.items.push([this.items.length]); 	   
    }
    
    self.items.subscribeChanged(function(newValue,oldValue){
    	self.logEntries.push('items length: newValue: ' + newValue.length + ' | oldValue: ' + oldValue.length);
    })
    
}


    ko.subscribable.fn.subscribeChanged = function (callback) {
        var oldValue;
        this.subscribe(function (_oldValue) {
            var value = ko.utils.unwrapObservable(this);
            if (value != null && value.constructor == Array){
                oldValue = _oldValue.slice();
            } else {
                oldValue = _oldValue;
            }
        }, this, 'beforeChange');

        this.subscribe(function (newValue) {
            callback(newValue, oldValue);
        });
    };




var model = new viewModel();
ko.applyBindings(model);