Knockout Validation - 验证不绑定到正确的对象实例

Question

我正在使用knockout-validation，并且在更改输入字段绑定的可观察对象后，错误消息显示不正确。

我有以下html

<div id="editSection" data-bind="if: selectedItem">
    <div>
        <label>First Name</label>
        <input data-bind="value:selectedItem().FirstName" />
    </div>
    <div>
        <label>Last Name</label>
        <input data-bind="value:selectedItem().LastName" />
    </div>
</div>

<br/>

<table data-bind='if: gridItems().length > 0'>
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
    <tbody data-bind='foreach: gridItems'>
        <tr>
            <td data-bind='text: FirstName' ></td>
            <td data-bind='text: LastName' ></td>
            <td><a href='#' data-bind='click: $root.editItem'>Edit</a></td>
        </tr>
    </tbody>
</table>

和JavaScript

var lineViewModel = function(first, last) {
    this.FirstName = ko.observable(first).extend({required:true});
    this.LastName = ko.observable(last).extend({required: true});

    this.errors = ko.validation.group(this);
}

var mainViewModel = function() {
    this.gridItems = ko.observableArray();
    this.gridItems([new lineViewModel('first1'), new lineViewModel(null,'last2')]);

    this.selectedItem = ko.observable();

    this.editItem = function(item){
        if (this.selectedItem()) {
            if (this.selectedItem().errors().length) {
                alert('setting error messages')
                this.selectedItem().errors.showAllMessages(true);
                }
            else{
                this.selectedItem(item)
            }
            }
        else
            this.selectedItem(item)
    }.bind(this)
}

ko.applyBindings(new mainViewModel());

重现

使用此JSFiddle

1. 点击第一行的修改
2. 点击第二行的编辑 - 您将收到有关验证的提醒 正在显示的消息然后它将显示
3. 填写必填字段
4. 再次点击第二行的编辑 - 您将看到“名字” 空白，“姓氏”更改为“last2”
5. 点击第一行的编辑 - 您将收到有关验证的提醒 消息显示，但它没有显示（BUG）

我应该采取另一种方法，还是应该采用与我使用ko.validation.group的方式不同的方法？

Answer 1

验证很好......你的编辑部分有问题。

使用with绑定。永远不要在绑定中使用someObservable().someObservableProperty，它不会像您期望的那样工作。您应该更改绑定上下文。

<div id="editSection" data-bind="with: selectedItem">
    <div>
        <label>First Name</label>
        <input data-bind="value: FirstName" />
    </div>
    <div>
        <label>Last Name</label>
        <input data-bind="value: LastName" />
    </div>
</div>