JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<input data-bind="value: itemProtected" />
<span data-bind="text: itemProtected"></span>
<button data-bind="click: itemProtected.commit">Commit</button>
<button data-bind="click: itemProtected.reset">Reset</button>

JavaScript

//wrapper for an observable that protects value until committed
ko.protectedObservable = function(initialValue) {
    //private variables
    var _temp = initialValue;
    var _actual = ko.observable(initialValue);

    var result = ko.dependentObservable({
        read: _actual,
        write: function(newValue) {
            _temp = newValue;
        }
    });
    
    //commit the temporary value to our observable, if it is different
    result.commit = function() {
        if (_temp !== _actual()) {
            _actual(_temp);
        }
    };

    //notify subscribers to update their value with the original
    result.reset = function() {
        _actual.valueHasMutated();
        _temp = _actual();
    };

    return result;
};

ViewModel = function(data) {
    var mapping = {
        itemProtected: {
            create: function(options) {
                return ko.protectedObservable(options.data)
            }
        }
    }
    
   return ko.mapping.fromJS(data, mapping, this);
}
    
var data = { itemProtected : "protected" };
ko.applyBindings(new ViewModel(data));