녹아웃 검증 - 고급 검색 사용자 인터페이스

Question

TFS 쿼리 작성기 웹 인터페이스와 비슷한 고급 검색 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 
}; 
}(); 

Answer 1

예, 모든 SearchLine 객체는 ko.validatedObservable으로 래핑되어야합니다. 또한 각 조건 행에 대해 isValid()을 확인하고 전역 유효성 플래그를 반환하는 계산 된 속성을 구현해야합니다. 나는 당신의 바이올린을 수정 한

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

:

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에서 사용할 수있는 버튼 "검색". 보세요 : http://jsfiddle.net/ostgals/uXBSA/8/

---

업데이트 :

 //... 

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

     //...