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 data-bind="foreach: keywords">
    <tr data-bind="css: { ok: selected(), notok: !selected() }">
        <td data-bind="text: name"></td>  
        <td data-bind="text: selected"></td>  
        <td><input type="checkbox" data-bind="checked: selected" /></td>       
        <td data-bind="text: category"></td>            
    </tr>
</table>

<select data-bind="options: category, 
                   optionsText: function(item) { 
                       return item.name 
                   }, 
                   value: selectedCategory"></select>
<a href="#" data-bind="click: addNew">Add item</a>
<a href="#" data-bind="click: addCategory">Add category</a>
<a href="#" data-bind="click: removeAll">Remove all</a>

CSS

table{
    width: 100%;        
}
tr td{
    padding: 5px;
}
tr.ok{
    background: #F1F7E6;
}
tr.notok{
    background: #FFEFEF;
}

JavaScript

ko.extenders.categoryChange = function(target, option) {
    target.subscribe(function(newValue) {
        var keywords = option();
        for (var i = 0; i < keywords.length; i++) {
            if (keywords[i].category == newValue.id) {
                keywords[i].selected(true);
            } else {
                keywords[i].selected(false);
            }
        }
    });
    return target;
};

var SimpleListModel = function() {
    var self = this;

    self.keywords = ko.observableArray();

    self.keywords.push({
        name: "test",
        selected: ko.observable(true),
        category: 1
    });
    self.keywords.push({
        name: "test 2",
        selected: ko.observable(false),
        category: 2
    });

    self.category = ko.observableArray();

    self.category.push({
        name: 'Category 1',
        id: 1
    });
    self.category.push({
        name: 'Category 2',
        id: 2
    });

    self.selectedCategory = ko.observable(1).extend({
        categoryChange: self.keywords
    });

    self.addNew = function() {
        self.keywords.push({
            name: "test 3",
            selected: ko.observable(true),
            category: 1
        });
    }
    self.addCategory = function() {
        self.category.push({
            name: 'Category 3',
            id: 3
        });
    }
    self.removeAll = function() {
        self.category.removeAll();
    }
};

ko.applyBindings(new SimpleListModel());