JSFiddle - React, Tailwind, and code Playground

by philipooo

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<select id="select-list" data-bind="value: id, optionsEx: list, optionsValue: 'id', optionsText: 'text', optionsCaption: 'Please select...'"></select>

JavaScript

$(function () {

    function addMissingItem(list, itemIdentifier, itemIdentifierValue) {
        if (itemIdentifierValue && itemIdentifier) {
            var foundItem = ko.utils.arrayFirst(list, function (item) {
                return item[itemIdentifier] === itemIdentifierValue;
            });
            if (foundItem === null) {
                var newItem = {
                    text: 'Deleted'
                };
                newItem[itemIdentifier] = itemIdentifierValue;
                list.push(newItem);
            }
        }
        return list;
    }

    ko.bindingHandlers["optionsEx"] = {
        update: function (element, valueAccessor, allBindingsAccessor) {
            var allBindings = allBindingsAccessor(),
                options = ko.utils.unwrapObservable(valueAccessor()),
                optionsValue = allBindings['optionsValue'],
                value = ko.utils.unwrapObservable(allBindings['value']),
                list;

            if (value) {
                list = addMissingItem(options, optionsValue, value);
                ko.bindingHandlers.options.update(element, function () {
                    return list;
                }, allBindingsAccessor);
            } else {
                ko.bindingHandlers.options.update(element, valueAccessor, allBindingsAccessor);
            }
        }
    };

    function Foo() {
        this.id = ko.observable("KEY_1");
        this.list = [{
            id: "KEY_2",
            text: "Two"
        }, {
            id: "KEY_3",
            text: "Three"
        }];
    }

    ko.applyBindings(new Foo());
});