基因敲除验证 - 高级搜索用户界面

Question

我正在构建一个类似于TFS查询生成器Web界面的高级搜索UI。在客户端实现中使用knockout，并且除了最终验证之外，一切或多或少都能工作，以便基本选择某些必需的项目。如果我选择一个项目然后取消选择该项目，那么它就会给我一个验证错误。这很好，但我希望在按下搜索按钮时验证表单。

我很确定我需要使用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 
}; 
}(); 

Answer 1

是的，您所有的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方法，因为我们的线阵列包含可观，而不是对象：

 //... 

     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));    
     }, 

     //...