JSFiddle - React, Tailwind, and code Playground

by wwwroot

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<select data-bind="options: seedData,
                        optionsText: 'firstName',                   
                        value: selectedValue"></select>
<button data-bind="click: sackBob">Sack Bob</button>
<button data-bind="click: hireBob">Hire Bob</button>

JavaScript

var data = [{
    ID: 1,
    firstName: 'John',
    value: '333'
}, {
    ID: 2,
    firstName: 'Bob',
    value: '333'
}, {
    ID: 3,
    firstName: 'Amy',
    value: '333'
}];

var vm = {
    seedData: ko.observableArray(data.slice(0)),
    sackBob: function () {
        console.log(data);
        this.seedData.remove(function (item) {
            return item.firstName == 'Bob';           
        });
        console.log(data);
    },
    hireBob: function () {
        this.seedData(data);
    }
};

vm.selectedValue = ko.observable(data[0]);
ko.applyBindings(vm);