JSFiddle - React, Tailwind, and code Playground

by Silvestrs Kante

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<select data-bind="value: firstValue, options: firstOptions, optionsText: 'Text',optionsCaption: 'Select First name...'"></select>
<select data-bind="lazyOptions: secondOptions, value: secondValue, optionsText: 'Text',optionsCaption: 'Select Last name...'"></select>
<span data-bind="text: firstValue"></span>
<span data-bind="text: secondValue"></span>

JavaScript

ko.bindingHandlers.lazyOptions = {
        init: function(element, valueAccessor, allBindings) {
           var initialized = false,
               focused = ko.observable(),
               //create a new computed to represent our options
               options = ko.computed({
                read: function() {
                    var value;

                    //before focus, return an array with a single option that 
                    //matches the current value
                    if (!initialized && !focused()) {
                        //determine the value by looking at what the value binding 
                        //is bound against
                        value = allBindings.get("value")();
                        
                        return [value];
                    }
                    //otherwise return the actual options
                    initialized = true;
                    return ko.unwrap(valueAccessor());
                },
                disposeWhenNodeIsRemoved: element
            });

            //apply the options binding with sub-options
            ko.applyBindingsToNode(element, { 
                hasFocus: focused,
                options: options,
                optionsText: allBindings.get("optionsText"),
                optionsCaption: allBindings.get("optionsCaption")
            }); 
        }
    };

var ValueOne = [{
    ID: 1,
    Text: "John"
}, {
    ID: 2,
    Text: "George"
}, {
    ID: 3,
    Text: "Largemouth"
}, {
    ID: 4,
    Text: "Christopher"
}];
var ValueTwo = [{
	LinkedID: 1,
	ID: 1,
	Text: "Smith"
},{
	LinkedID: 1,
	ID: 2,
	Text: "Walker"
},{
	LinkedID: 2,
	ID: 3,
	Text: "McArthur"
},{
	LinkedID: 3,
	ID: 4,
	Text: "Small-feet"
},{
	LinkedID: 4,
	ID: 5,
	Text: "Columbus"
},{
	LinkedID: 4,
	ID: 6,
	Text: "Nolan"
}];

var data = {
    json: JSON.stringify({
        text: 'some text',
        array: [1, 2, 'three'],
        object: {
            par1: 'another text',
            par2: [3, 2,...