knockoutjs $ parent undefined

Question

我遇到了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修复此问题。一切正常。

Answer 1

<强>问题

1. 在您的Html中，您将表格绑定到with: ProductsViewModel。这不是必需的。

2. 在您的加载数据按钮中，您没有传递实际功能，而是立即执行，因此只需删除()。

请参阅此{JsFiddle：demo