文志新引导程序表打破Knockout.js绑定

Question

我正在尝试将Bootstrap表扩展集成到我的应用程序中。一般来说，它工作得很好，但我在破解我的淘汰可观测值时遇到了问题。

JSFiddle上的这段代码说明了这个问题。当为表调用bootstrapTable（）时，到文本框的绑定被破坏。如果你把最后一行注释掉，一切都很好。

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({});

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>

Answer 1

我看到的唯一问题是，当您更新数量时，它会更新所有项目的行值吗？

可以很简单地解决（添加2dp格式）：

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);
   });
};

更新到您的JSFiddle

Answer 2

简单的解决方案是，您需要在applyBindings之前调用bootstrapTable，$（"#selector"）BoostrapTable（｛｝）->重新创建您的html，您将丢失淘汰绑定。

var orderViewModel = function(data) {
  var self = this;
  ko.mapping.fromJS(data, orderMapping, this);
};
$('#OrderTable').bootstrapTable({});
var viewModel = new orderViewModel(order);
ko.applyBindings(viewModel);