JSFiddle - React, Tailwind, and code Playground

by madcapnmckay

HTML

<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<input type="text" data-bind="value: someValue"/>
<label data-bind="text: someValue"></label>

JavaScript

ko.extenders.defaultIfNull = function(target, defaultValue) {
    var result = ko.computed({
        read: target,
        write: function(newValue) {
            if (!newValue) {
                target(defaultValue);
            } else {
                target(newValue);
            }
        }
    });
    
    result(target());
    
    return result;
};

var viewModel = function() {
    this.someValue = ko.observable().extend({ defaultIfNull: "some default" });
};

ko.applyBindings(new viewModel());