Javascript 抛出异常"；未捕获类型错误：无法读取属性'；0'；“未定义”的定义；将tablesorter.js与敲除js一起使用时

我正在开发一个应用程序，在这个应用程序中，我使用knockout Js，并尝试通过jquery.tablesorter.Js单击相应的列来实现表排序。在MVC4WebAPI中 没有淘汰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>

}

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时，通常会出现此错误，但在我的代码中，我将数据绑定到标记内的表。 我可以知道我在装订或其他方面犯了什么错误吗