javascript - テンプレートを使用した並べ替えテーブル

Question

列のあるテーブルにノックアウトバインディングがあります。各列のテーブルの並べ替えを実現しようとしていました。ビューは次のようになります。

<table id="notes" class="notes_table">
                            <tr class="head">
                                <th data-bind='click: function() { SortItems("CreatedDate")}'>
                                    <span>Date</span>
                                </th>
                                <th data-bind='click: function() { SortItems("Type")}'>
                                    <span>Type</span>
                                </th>
                                <th data-bind='click: function() { SortItems("Category")}'>
                                    <span>Category</span>
                                </th>
                                <th data-bind='click: function() {SortItems("AddedBy")}'>
                                    <span>Added by</span>
                                </th>
                             </tr>
                            <tbody data-bind="template: { name: 'StudentNote', foreach: notes }"></tbody>
                        </table>
                        <script type="text/html" id="StudentNote">
                            <tr class="even">
                                <td><span data-bind="text: CreatedDate"></span></td>
                                <td><span data-bind="text: Type"></span></td>
                                <td><span data-bind="text: Category"></span></td>
                                <td><span data-bind="text: AddedBy"></span></td>
                            </tr>
                        </script>

JavaScriptは次のようになります。

function notesViewModel() {
    var _this = {};
    _this.colName = "CreatedDate";
    _this.sortOrder = "desc";
    _this.notes = ko.observableArray();
 _this.SortItems = function (ColumnName) {

        var newNotes = _this.notes();
        if (_this.sortOrder === "desc") {
            this.notes(newNotes.sort(notesViewModel._getSortFunction = function (a, b) {
                _this.sortOrder = "asc";
                return a[ColumnName] < b[ColumnName] ? -1 : 1;
            }));

        } else {
            this.notes(newNotes.sort(notesViewModel._getSortFunction = function (a, b) {
                _this.sortOrder = "desc";
                return a[ColumnName] > b[ColumnName] ? -1 : 1;
            }));
        }
    };
 ko.applyBindings(_this, $("body").get(0));
 return _this;

並べ替えを行っても、各列の昇順と降順の並べ替えを切り替えるだけですが、並べ替えている列を認識しません..各列で並べ替えを行う方法..