0

我正在构建一个类似于 TFS 查询构建器 Web 界面的高级搜索 UI。使用淘汰赛进行客户端实现，除了最终验证以使某些必需项目基本上被选中外，其他一切都或多或少地工作。如果我选择一个项目然后取消选择该项目，它就会给我一个验证错误。这很好，但我希望在点击搜索按钮时验证表单。

我很确定我需要使用 ko.validatedobservable 方法，我只是不确定如何。 无论如何，如果有人有时间或愿意帮助我，我有一个小提琴要看：http: //jsfiddle.net/sstolp/uXBSA/ 。我会非常感激。

感谢您的时间。

scvm.SearchLine = function () {
var self = this;
self.selectedField = ko.observable().extend({ required: true });
self.selectedOperator = ko.observable().extend({ required: true });
self.firstdate = ko.observable(new Date());
self.lastdate = ko.observable(new Date());
self.thedate = ko.observable(new Date());

return self;};

scvm.Criteria = function () {
var self = this,
    lines = ko.observableArray([]),

    // Put one line in by default
    loadInitialData = function () {
        lines.push(new scvm.SearchLine());
    },

    rowcount = ko.computed(function () {
        return lines().length;
    }),

    // Operations
    addLine = function () {
        lines.push(new scvm.SearchLine());
    },

    removeLine = function (line) {
        lines.remove(line);
    },

    search = function () {
        var data = $.map(lines(), function (line) {
            return line.selectedField() ? {
                selectedField: line.selectedField().searchfield,
                selectedOperator: line.selectedOperator().name,
            } : undefined
        });
        alert("Send to server: " + JSON.stringify(data));            
    },

    clear = function () {
        lines.removeAll();
    };

return {
    lines: lines,
    loadInitialData: loadInitialData,
    rowcount: rowcount,
    addLine: addLine,
    removeLine: removeLine,
    search: search,
    clear: clear
};
}();
4

1 回答 1

0

是的，您的所有 SearchLine 对象都必须包装到ko.validatedObservable. 您还应该实现计算属性，它将检查isValid()每个标准行并返回全局有效性标志。

scvm.SearchLine = function () {
    var self = this;
    self.selectedField = ko.observable().extend({ required: true });
    self.selectedOperator = ko.observable().extend({ required: true });
    self.firstdate = ko.observable(new Date());
    self.lastdate = ko.observable(new Date());
    self.thedate = ko.observable(new Date());

    return ko.validatedObservable(self);
};

scvm.Criteria = function () {

    // ...

    return {
        lines: lines,
        loadInitialData: loadInitialData,
        rowcount: rowcount,
        addLine: addLine,
        removeLine: removeLine,
        search: search,
        clear: clear,
        // new property that indicates validity of all lines
        linesValid: ko.computed(function(){
            var items = lines();
            for (var i = 0, l = items.length; i < l; i++)
                if (!items[i].isValid()) return false;
            return true;
        })
    };
}();

这个新属性可用于enable绑定“搜索”按钮：

<input type="button"
       data-bind="enable: linesValid, click: search"
       title="Clicking this button will run a search."
       value="Search" />

我已经修改了你的小提琴。看看：http: //jsfiddle.net/ostgals/uXBSA/8/

更新：

我们还应该稍微修改 Criteria.search 方法，因为我们的线数组包含 observables 而不是对象：

        //...

        search = function () {
            var data = $.map(lines(), function (line) {
                line = ko.utils.unwrapObservable(line);
                return line.selectedField() ? {
                    selectedField: line.selectedField().searchfield,
                    selectedOperator: line.selectedOperator().name,
                } : undefined
            });
            alert("Send to server: " + JSON.stringify(data));            
        },

        //...
于 2013-02-10T14:20:27.123 回答