JSFiddle - React, Tailwind, and code Playground

by romanych

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<h1>Active</h1>
<ul data-bind="template: { foreach: ActiveRows,
                            afterAdd: $.highlight }">
    <li>
        <input type="checkbox" data-bind="checked: active" />
        <span data-bind="text: text"></span>
    </li>                       
</ul>
<h1>Inactive</h1>                                
<ul data-bind="template: { foreach: InactiveRows,
                            afterAdd: $.highlight }">
    <li>
        <input type="checkbox" data-bind="checked: active" />
        <span data-bind="text: text"></span>
    </li>                       
</ul>
                                
<button data-bind="click: AddRow">Add row</button>

JavaScript

$.highlight = function (element) {
            if (element.nodeType != 1) {
                return;
            }
            $(element).effect('highlight', {color: '#77cc25'}, 1000);
        };

var viewModel = new function() {
    var self = this;

    self.Rows = ko.observableArray([
        {text: 'Row 1', active: ko.observable(true)},
        {text: 'Row 2', active: ko.observable(true)},
        {text: 'Row 3', active: ko.observable(true)},
        {text: 'Row 4', active: ko.observable(false)}
    ]);
    
    self.ActiveRows = ko.computed(function() {
        return ko.utils.arrayFilter(self.Rows(), function(row) {
            return row.active();
        });
    });
    
    self.InactiveRows = ko.computed(function() {
        return ko.utils.arrayFilter(self.Rows(), function(row) {
            return !row.active();
        });
    });

    
        
    self.AddRow = function() {
        self.Rows.push({text: 'New row ' + i++, active: ko.observable(false)});
    };
}();
  
ko.applyBindings(viewModel);