knockout.js - 嵌套数据结构中的淘汰赛验证

Question

我有一个表单的视图模型，我试图将验证添加到使用敲除验证。

<table data-bind='visible: slots().length > 0'>
<thead>
        <tr>
            <th>Start Time</th>
            <th>End Time</th>
       </tr>
    </thead>
    <tbody data-bind='foreach: slots'>
        <tr>
            <td><input type="text" class="input-medium time-picker" data-bind='value: start_time' required="true"/></td>
            <td><input type="text" class="input-medium time-picker" data-bind='value: end_time' required="true"/></td>
            <td><a href='#' data-bind='click: $root.removeSlot'><i class="icon-minus-sign"/></a></td>
        </tr>
    </tbody>
</table>
<button class="btn btn-primary" data-bind='click: addSlot'>Add Row</button>

我需要验证如果我在第 1 行输入“​​end_time”并且当我添加新行时，第 2 行的 start_time 必须大于第 1 行的 end_time。

Answer 1

你需要使用选项 deep，如果你想要一个在向数组中添加新项目时不起作用的验证组。您可以通过将验证组包装在可观察对象中并使用计算来启用禁用保存按钮来解决此问题。

http://jsfiddle.net/vGTCz/2/

ViewModel = function() {
    this.error = ko.observable();
    this.items = ko.observableArray();
    this.items.subscribe(this.onAdded, this); 

    this.canSave = ko.computed(this.getCanSave, this);
};

ViewModel.prototype = {
    onAdded: function() {
        this.error(ko.validation.group(this));
    },
    add: function() {
        this.items.push(new ItemViewModel());
    },
    getCanSave: function() {
        return this.error() && this.error()().length === 0;
    }
}