JSFiddle - React, Tailwind, and code Playground

by jiggle

HTML

<select data-bind="missingText:'{val} is DELETED',options:businessUnits.businessUnitsList,optionsText:'title',optionsValue:'id', value:businessUnits.currentlySelected"></select>
<button data-bind="click:businessUnits.selectItem">change to 3</button>

<div>
    <label>Change currently selected to:</label><input type="text" data-bind="value:businessUnits.newItemId"/>
    <button data-bind="click:businessUnits.addItem">Change</button>
</div>

CSS

.filterItemSelect {
    color:#0069ab;
}

JavaScript

ko.bindingHandlers["missingText"] = {
    
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bind) {
        var allBindings = allBindingsAccessor(),
            items = allBindings['options'],
            value = ko.utils.unwrapObservable(allBindings['value']),
            valueProperty = ko.utils.unwrapObservable(allBindings['optionsValue']),
            textProperty = ko.utils.unwrapObservable(allBindings['optionsText']),
            missingTextProperty= ko.utils.unwrapObservable(allBindings['missingText']),
            valueSetter = allBindings['value'],
            list
        
        console.log('missingTextProperty',missingTextProperty);
        console.log('textProperty',textProperty);
        console.log('valueProperty',valueProperty);
        
        //we must have the two properties specified
        if (!valueProperty || !textProperty){
            throw ("missingText requires the optionsText and optionsValue property to be provided");   
        }
        
        console.log('element', element);
        console.log('allBindings', allBindings);
        console.log('items', items());
        console.log('value', value);
        console.log('valueSetter', valueSetter);
        console.log('valueSetter2', valueSetter());
        console.log('valueAccessor', ko.utils.unwrapObservable(valueAccessor()));
        console.log('viewModel', viewModel);
        console.log('bind', bind);

       
        if (value) {
            //try and find the currentlySelected value in the list
            var found = ko.utils.arrayFilter(items(), function (item) {
                console.log('finding ', value, item);
                //we're binding to a particular field for the value
                //so look for that as the value
                return item[valueProperty] == value;
            });
            console.log('found? ', found);
            
            //if we haven't found it in the list, add it with our missingText text
      ...