Wenzhixinのブートストラップテーブルを破るKnockout.jsバインディング

Question

私はBootstrap Table extensionを自分のアプリケーションに統合しようとしています。それは一般的にはうまくいきますが、私はノックアウト観測で拘束力を失う問題があります。

このコードavailable on 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); 
    }); 
}; 

Update to Your JSFiddle

Answer 2

簡単に修正され、あなたがapplyBindings前bootstrapTableを呼び出す必要がある、 $（ "＃セレクター"）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);