title: Throwing an exception "Uncaught TypeError: Cannot read property '0' of undefined" while using tablesorter.js with knock out js
body: <p>I am working on an application in which I am using knockout Js and I am trying to implement table sorting on clicking the respective columns with jquery.tablesorter.js. in MVC4 Web API
  Sorting without knockout Js works fine. I have the code below</p>
  
  <p><strong>1. Index.cshtml</strong></p>
  
  <pre><code>&lt;div class="loadingIndicator" data-bind="visible: loading()"&gt;&lt;/div&gt;
  &lt;table class="newProduct"&gt;
      &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;&lt;a class="btn btn-success" data-bind="click: add, visible: !loading()"&gt;New Product&lt;/a&gt;
          &lt;/th&gt;
  
      &lt;/tr&gt;
          &lt;/thead&gt;
  &lt;/table&gt;
  
  
  
  &lt;link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /&gt;
  
       &lt;script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/jquery.tablesorter.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/jquery.tablesorter.pager.js")" type="text/javascript"&gt;&lt;/script&gt;
  
  
  &lt;/script&gt;*@
  
  @*&lt;table class="productTable" data-bind="visible: !loading()"&gt;*@
      &lt;table class="productTable" data-bind="sortTable:true"&gt;
      &lt;thead&gt;
  
          &lt;tr&gt;
              &lt;th&gt;Product&lt;/th&gt;
              &lt;th&gt;Term&lt;/th&gt;
              &lt;th&gt;Location&lt;/th&gt;
              &lt;th&gt;Pipeline&lt;/th&gt;
              &lt;th&gt;Bid C/P&lt;/th&gt;
              &lt;th&gt;Bid Volume&lt;/th&gt;
              &lt;th&gt;Index&lt;/th&gt;
  
  
  
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
  
      &lt;/thead&gt;
      &lt;tbody data-bind="foreach: canadiancrudes"&gt;
         &lt;tr&gt; &lt;td data-bind="text: Product"&gt;&lt;/td&gt;
      &lt;td data-bind="text: Term"&gt;&lt;/td&gt;
      &lt;td data-bind="text: Location"&gt;&lt;/td&gt;
      &lt;td data-bind="text: Pipeline"&gt;&lt;/td&gt;
      &lt;td data-bind="text: BidCP"&gt;&lt;/td&gt;
      &lt;td data-bind="text: BidVolume"&gt;&lt;/td&gt;
      &lt;td data-bind="text: Index"&gt;&lt;/td&gt;
  
  &lt;/tr&gt;
  
          &lt;tr&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
  
      &lt;tfoot&gt;
          &lt;tr&gt;
              &lt;th&gt;Product&lt;/th&gt;
              &lt;th&gt;Term&lt;/th&gt;
              &lt;th&gt;Location&lt;/th&gt;
              &lt;th&gt;Pipeline&lt;/th&gt;
              &lt;th&gt;Bid C/P&lt;/th&gt;
              &lt;th&gt;Bid Volume&lt;/th&gt;
              &lt;th&gt;Index&lt;/th&gt;
  
  
  
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
  
      &lt;/tfoot&gt;
  &lt;/table&gt;
  @section scripts {
      &lt;script src="~/Scripts/knockout-2.2.1.js"&gt;&lt;/script&gt;
      &lt;script src="~/App/CustomBindings.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/jquery.signalR-1.0.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="/signalr/hubs"&gt;&lt;/script&gt;
      &lt;script src="~/App/CanadianCrudeViewModel.js"&gt;&lt;/script&gt;
  
  }
  </code></pre>
  
  <p><strong>2. View Model</strong></p>
  
  <pre><code>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);
      }
  };
  </code></pre>
  
  <p>For some reasons, I am unable to sort the table when I click on the column and it throws an exception </p>
  
  <pre><code>Uncaught TypeError: Cannot read property '0' of undefined 
  </code></pre>
  
  <p>I know this error usually rises when we try to apply tablesorter for an empty table  but in my code, I am binding the data to my table inside the  tag. 
  May I know what mistake I made either while binding or anything else.</p>