$親バインディングコンテキストが未定義のKnockoutJSに問題があります。
コード
<div class="row">
<div class="col-md-4">
<div class="panel panel-info">
<div class="panel-heading">
<h2 class="panel-title">Products Data</h2>
</div>
<div class="panel-body">
<table class="table table-striped table-bordered table-condensed" data-bind="with: ProductsViewModel">
<thead>
<tr>
<th>ProductID</th>
<th>Product Name</th>
<th>Units In Stock</th>
<th>Action</th>
</tr>
</thead>
<tbody data-bind="foreach: products">
<tr>
<td data-bind="text: $data.ProductID"></td>
<td data-bind="text: $data.ProductName"></td>
<td data-bind="text: $data.UnitsInStock"></td>
<td><button class="btn btn-danger btn-xs" data-bind="click: $parent.RemoveProduct">[x] delete</button></td>
</tr>
</tbody>
</table>
<button class="btn btn-large" data-bind="click: GetProducts()">Load Data</button>
</div>
</div>
</div>
</div>
と:表中の正しく
/// <reference path="../Scripts/knockout-3.4.0.js" />
/// <reference path="../Scripts/jquery-1.10.2.js" />
function ProductsViewModel() {
var self = this;
self.products = ko.observableArray([]);
self.RemoveProduct = function() {
bootbox.alert({ message: 'Pressed !!', size: 'small' });
}
self.GetProducts = function() {
self.products.removeAll();
$.getJSON('/api/products', function (data) {
$.each(data, function (key, value) {
self.products(data);
});
});
}
}
$(document).ready(function() {
ko.applyBindings(ProductsViewModel);
});
全ての結合作業、$親が定義されていないボタン、上の結合クリックイベントを除きます。
ボタンコントロールを削除すると、すべてのデータがテーブル要素に正しくバインドされます。
これを修正する方法はありますか?それは私の知る限り、すべて標準のノックアウトコードです。
ありがとうございます。
bax2097
私は完全に$親を削除することによって、これを修正しました。すべて今働いている。
ため、このJsFiddleを参照してください? –
これは例外メッセージです:ライン3326で 未処理の例外は、http列21:// localhostを:51496 /スクリプト/ノックアウト-3.4.0.debug.js 0x800a138f - JavaScriptのランタイムエラー:プロパティを取得できません ' RemoveProduct 'が $親が定義されていないことを示唆していると思います – bax2097
私は$ route.ProductsViewModel.RemoveProductと同じ結果を試してみました – bax2097