JSFiddle - React, Tailwind, and code Playground

by wedvich

HTML

<div data-bind="text: something"></div>
<div data-bind="text: somethingAssociated"></div>
<ul data-bind="foreach: associatedSomething">
    <li data-bind="text: $data"></li>
</ul>
<div data-bind="text: somethingElse"></div>
<button data-bind="click: reset">Reset</button>

JavaScript

var SomeModel = function () {
    var self = this;
    
    self.something = ko.observable( 123 );
    self.somethingAssociated = ko.observable( 'something' );
    self.associatedSomething = ko.observableArray( [1,2,3] );
    self.somethingElse = ko.observable( 'abc' );
};

var reset = function ( obj, whitelist ) {
    for ( var prop in obj ) {
        if ( obj.hasOwnProperty( prop ) && ko.isObservable( obj[ prop ] ) && whitelist.indexOf( prop ) === -1 ) {
            obj[ prop ]( undefined );
        }
    }
};

SomeModel.prototype.reset = function () {
    reset( this, [ 'something', 'somethingElse' ] );
};

ko.applyBindings( new SomeModel() );