JSFiddle - React, Tailwind, and code Playground

by rniemeyer

HTML

<input data-bind="value: first" />
<input data-bind="value: last" />

<hr/>

<ul data-bind="foreach: changes">
    <li data-bind="text: $data"></li>
</ul>

JavaScript

ko.subscribable.fn.withUpdater = function(prop, handler) {
    //subscribe to changes and fix the property name as the first arg
    this.subscribe(handler.bind(this, prop));
    
    return this;
};

var updateFunction = function(property, newValue) {
    viewModel.changes.push(property + " updated to: " + newValue);
};

var viewModel = {
    first: ko.observable("Bob").withUpdater("first", updateFunction),
    last: ko.observable("Smith").withUpdater("last", updateFunction),
    changes: ko.observableArray()
};

ko.applyBindings(viewModel);