敲除验证 - 验证未绑定到正确的对象实例

Question

我正在使用 knockout-validation，但在更改输入字段绑定到的 observable 后，我遇到了错误消息未正确显示的问题。

我有以下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

点击第一行的编辑
单击第二行的编辑 - 您将收到验证提醒正在显示消息，然后它将显示
填写必填字段
再次单击第二行的编辑 - 您将看到 "First Name" go 空白和 "Last Name" 更改为 "last2"
单击第一行的编辑 - 您将收到验证提醒正在显示消息，但未显示（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>

敲除验证 - 验证未绑定到正确的对象实例

Knockout Validation - Validation not binding to correct instance of object

javascript

knockout.js

knockout-validation

我有以下html

和JavaScript

转载