Wenzhixin bootstrap-table breaking Knockout.js bindings

I'm trying to integrate the Bootstrap Table extension into my application. It works well generally but I am having problems with binding breaking on my knockout observables.

This code available on JSFiddle illustrates the issue. The binding to the textbox is broken when bootstrapTable() is called for the table. If you comment out the last line, everything works great.

Javascript

var order = {
  Id: 1,
  CustomerName: 'A Customer',
  Lines: [{
    ProductCode: 'Prod_1',
    Cost: 11.11,
    Qty: 1
  }, {
    ProductCode: 'Prod_2',
    Cost: 22.22,
    Qty: 2
  }, {
    ProductCode: 'Prod_3',
    Cost: 33.33,
    Qty: 3
  }, ]
};

var orderMapping = {
  'Lines': {
    create: function(options) {
      return new orderLineViewModel(options.data);
    }
  }
}

var orderLineViewModel = function(data) {
  var self = this;
if (data != null) {
  ko.mapping.fromJS(data, {}, this);
}
  self.LineValue = ko.computed(function() {
    return (self.Cost() * self.Qty()).toFixed(2);
  });
};

var orderViewModel = function(data) {
  var self = this;
  ko.mapping.fromJS(data, orderMapping, this);
};

var viewModel = new orderViewModel(order);
ko.applyBindings(viewModel);

//Removing the line below results in ko working fine
$('#OrderTable').bootstrapTable({});

Select allOpen in new window

HTML

<table id="OrderTable" class="table">
  <thead>
    <tr>
      <th>Product</th>
      <th>Line Value</th>
      <th>Cost</th>
      <th>Qty</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: Lines">
    <tr>
      <td><span data-bind="text: ProductCode"></span></td>
      <td><span data-bind="text: LineValue"></span></td>
      <td><span data-bind="text: Cost"></span></td>
      <td>
        <input type="text" data-bind="value: Qty" />
      </td>
    </tr>
  </tbody>
</table>

Select allOpen in new window