淘汰赛验证 - 验证未绑定到正确的对象实例

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>