JSFiddle - React, Tailwind, and code Playground

by psteele

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<div>Available</div>
<select data-bind="options: Available, optionsText: 'Name'" size="4"></select>
<div>Unassigned</div>
<select data-bind="options: Unassigned, optionsText: 'Name'" size="4"></select>

JavaScript

function ViewModel() {
    var self = this;
    
    self.PersonList = [
        { Name: 'Bob', DateTime: '3/3/2012', StatusId: ko.observable(10) },
        { Name: 'Sue', DateTime: '1/31/2011', StatusId: ko.observable(20) },
        { Name: 'Ken', DateTime: '7/8/2009', StatusId: ko.observable(31) }
        ];
    
    self.Available = ko.computed(function() {
        return $.grep(self.PersonList, function(el) {
            return el.StatusId() > 0 && el.StatusId() < 11;
        });
    });

    self.Unassigned = ko.computed(function() {
        return $.grep(self.PersonList, function(el) {
            return el.StatusId() > 10 && el.StatusId() < 21;
        });
    });
}

var vm = new ViewModel();
ko.applyBindings(vm);
window.setTimeout(function() {
    vm.PersonList[0].StatusId(15);
}, 3000);