knockout.js - 从淘汰赛 observableArray 中删除项目导致 jquery-validation 异常

Question

我正在尝试将 jquery 验证与 knockoutjs 结合使用。我绑定到 observableArray 并使用模板中的复选框。当未选中该复选框时，该项目将从 observableArray 中删除。发生这种情况后，会发生来自 jquery 验证的异常“未捕获的类型错误：无法读取 null 的属性 'nodeName'”。要查看此异常，您可以使用 chrome 开发人员工具进行观看。

这是我的代码的 jsfiddle：http: //jsfiddle.net/dgHS3/28/

这是html

<form id="myForm">
<table>
    <thead>
        <tr>
            <th>Use</th>
            <th>Caption</th>
        </tr>
    </thead>

    <tbody data-bind="foreach: selectedFields">
        <tr > 
            <td><input type="checkbox" data-bind="checked: IsSelected, uniqueName: true, click: $root.addRemoveField" /></td>
            <td><input class="required" data-bind="value: Caption, enable: IsSelected, uniqueName: true" /></td>
        </tr>
    </tbody>

这是javascript：

function FieldData(data) {
    var self = this;
    self.Caption = ko.observable(data.Caption);
    self.IsSelected = ko.observable(data.IsSelected);
}

function myViewModel() {
    var self = this;

    self.selectedFields = ko.observableArray([]);


    init = function () {
        var data = new Object();

        data.Caption = "cap1";
        data.IsSelected = true;

        var flds = [];
        var fld = new FieldData(data);
        flds.push(fld);

        self.selectedFields(flds);

    }();

    self.addRemoveField = function (field) {
        if (field.IsSelected()) {
            self.selectedFields.push(field);
        }
        else {
            self.selectedFields.remove(field);
        }

        return true;
    };

}

var vm = new myViewModel();
ko.applyBindings(vm);