JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<table>
    <tbody data-bind="foreach: seats">
        <tr>
            <td data-bind="text: name"></td>
            <td data-bind="text: isselected"></td>
            <td><input type="checkbox" data-bind="checked: isselected, checkSelected: { item: $data, category: $root.categories, selected: $root.selectedCategory() }"></td>
        </tr>    
    </tbody>
</table>
<div>
    <a href="#" data-bind="click: append">Append</a>
</div>
<select data-bind="options: categories, optionsText: 'name', value: selectedCategory"></select>
<a href="#" data-bind="click: addNew">add new</a>

CSS

table{
width: 100%;        
}

JavaScript

ko.bindingHandlers.checkSelected = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        if (typeof valueAccessor().selected.id != 'undefined') {
            if (valueAccessor().item.cid == valueAccessor().selected.id) {
                $(element).attr("checked", "checked");
            } else {
                $(element).removeAttr("checked");
            }
        }
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        if (typeof valueAccessor().selected.id != 'undefined') {
            if (valueAccessor().item.cid == valueAccessor().selected.id) {
                $(element).attr("checked", "checked");
            } else {
                $(element).removeAttr("checked");
            }
        }
    }
};

function ReservationsViewModel() {
    var self = this;

    // Editable data
    self.seats = ko.observableArray();
    self.seats.push({
        name: "a1",
        isselected: ko.observable(true),
        cid: 1
    });
    self.seats.push({
        name: "a2",
        isselected: ko.observable(false),
        cid: 2
    });
    self.seats.push({
        name: "a3",
        isselected: ko.observable(true),
        cid: 1
    });

    self.append = function() {
        self.seats.push({
            name: "a4",
            isselected: ko.observable(true),
            cid: 3
        });
        self.categories.removeAll();
        self.categories.push({
            id: 1,
            name: "c1"
        });
        self.categories.push({
            id: 2,
            name: "c2"
        });
}

self.categories = ko.observableArray();
self.selectedCategory = ko.observable({
    id: 1,
    name: "c1"
});

self.categories.push({
    id: 1,
    name: "c1"
});
self.categories.push({
    id: 2,
    name: "c2"
});

self.addNew = function() {
    self.categories.push({
        id: 3,
        name: "c3"
    });
}

}

ko.applyBindings(new ReservationsViewModel());