template foreach & jquery tablesorter

https://groups.google.com/d/topic/knockoutjs/yKe7OSBrdJ8/discussion

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="http://autobahn.tablesorter.com/jquery.tablesorter.js"></script>
<table data-bind="tableSorter: activeUsers">
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>active</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: activeUsers">
         <tr>
             <td data-bind="text: id"></td>
             <td data-bind="text: name"></td>
             <td>
                 <input type="checkbox" data-bind="checked: isActive" />
             </td>
        </tr>             
    </tbody>
</table>

CSS

td, th { padding: 2px; }

JavaScript

ko.bindingHandlers.tableSorter = {
    init: function(element) {
        setTimeout(function() { $(element).tablesorter(); }, 0);
    },
    update: function(element, valueAccessor) {
        ko.utils.unwrapObservable(valueAccessor()); //just to get a dependency
        $(element).trigger("update"); 
    } 
};

var Person = function(id, name, isActive) {
   this.id = id;
   this.name = ko.observable(name);
   this.isActive = ko.observable(isActive); 
};

var ViewModel = function(people) {
    var self = this;
    this.people = ko.observableArray(people);
    this.activeUsers = ko.computed(function() {
        return ko.utils.arrayFilter(self.people(), function(person) {
           return person.isActive();
        }); 
    });
    
    this.toggleUser = function(person) {
        person.isActive(!person.isActive());        
    };
};

ko.applyBindings(new ViewModel([
    new Person(1, "Bob", true),
    new Person(2, "Ted", false),
    new Person(3, "Ann", true),
    new Person(4, "Sue", true),
    new Person(5, "Jon", true),
    new Person(6, "Ali", true),
    new Person(7, "Ben", true)
]));