我遇到了KnockoutJS的问题,其中$ parent绑定上下文未定义。
代码
<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);
});
除了按钮上的click事件绑定外,所有绑定在表中都正常工作,其中$ parent未定义。
如果我删除了按钮控件,则所有数据都会在表格元素中正确绑定。
任何想法如何解决这个问题?据我所知,它是所有标准的Knockout代码。
提前致谢。
bax2097
我通过完全删除$ parent修复此问题。一切正常。
答案 0 :(得分:0)
<强>问题强>
在您的Html中,您将表格绑定到with: ProductsViewModel
。这不是必需的。
在您的加载数据按钮中,您没有传递实际功能,而是立即执行,因此只需删除()
。
请参阅此{JsFiddle:demo