javascript - ノックアウトjsでtablesorter.jsを使用しているときに例外「Uncaught TypeError:未定義のプロパティ '0'を読み取ることができません」をスローする

Question

私はノックアウト Js を使用しているアプリケーションに取り組んでおり、jquery.tablesorter.js でそれぞれの列をクリックしてテーブルの並べ替えを実装しようとしています。MVC4 Web API では、ノックアウト Js を使用しない並べ替えは正常に機能します。私は以下のコードを持っています

1.Index.cshtml

<div class="loadingIndicator" data-bind="visible: loading()"></div>
<table class="newProduct">
    <thead>
    <tr>
        <th><a class="btn btn-success" data-bind="click: add, visible: !loading()">New Product</a>
        </th>

    </tr>
        </thead>
</table>



<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

     <script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.tablesorter.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.tablesorter.pager.js")" type="text/javascript"></script>


</script>*@

@*<table class="productTable" data-bind="visible: !loading()">*@
    <table class="productTable" data-bind="sortTable:true">
    <thead>

        <tr>
            <th>Product</th>
            <th>Term</th>
            <th>Location</th>
            <th>Pipeline</th>
            <th>Bid C/P</th>
            <th>Bid Volume</th>
            <th>Index</th>



            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>

    </thead>
    <tbody data-bind="foreach: canadiancrudes">
       <tr> <td data-bind="text: Product"></td>
    <td data-bind="text: Term"></td>
    <td data-bind="text: Location"></td>
    <td data-bind="text: Pipeline"></td>
    <td data-bind="text: BidCP"></td>
    <td data-bind="text: BidVolume"></td>
    <td data-bind="text: Index"></td>

</tr>

        <tr></tr>
    </tbody>

    <tfoot>
        <tr>
            <th>Product</th>
            <th>Term</th>
            <th>Location</th>
            <th>Pipeline</th>
            <th>Bid C/P</th>
            <th>Bid Volume</th>
            <th>Index</th>



            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>

    </tfoot>
</table>
@section scripts {
    <script src="~/Scripts/knockout-2.2.1.js"></script>
    <script src="~/App/CustomBindings.js"></script>
    <script src="~/Scripts/jquery.signalR-1.0.0.min.js"></script>
    <script src="/signalr/hubs"></script>
    <script src="~/App/CanadianCrudeViewModel.js"></script>

}

2.モデルを見る

var CanadianCrudeViewModel = function (CanadianContext) {
  var self = this;
  self.canadiancrudes = ko.observableArray();
  self.loading = ko.observable(true);

self.add = function (canadiancrude) {
      var payload = {
          Term: "Term", Product: "Product" , Location: "Location", Pipeline: "Pipeline",
          BidCP: "Bid CP", BidVolume: "Bid Volume", Index: "Index", Bid: "0.0", Offer: "0.0",
          OfferVolume:"Offer Volume", OfferCP:"Offer CP"
      };
    $.ajax({
        url: '/odata/Canadiancrudes',
      type: 'POST',
      //  data: ko.toJSON(payload),
      data: JSON.stringify(payload),
      contentType: 'application/json',
      dataType: 'json'
    });
  }
}


ko.bindingHandlers.sortTable = {
    init: function (element, valueAccessor) {
        setTimeout(function () {
            $(element).addClass('tablesorter');
            $(element).tablesorter({ widgets: ['zebra'] });
        }, 0);
    }
};

何らかの理由で、列をクリックするとテーブルをソートできず、例外がスローされます

Uncaught TypeError: Cannot read property '0' of undefined 

空のテーブルに tablesorter を適用しようとすると、このエラーが通常発生することはわかっていますが、私のコードでは、タグ内のテーブルにデータをバインドしています。バインド中またはその他のときに私が犯した間違いを知ることができますか.