2013-10-10 2 views
1

knockout 유효성 검사를 사용하여 유효성 검사를 추가하려는 양식에 대한 viewmodel이 있습니다. 중첩 데이터 구조에서 녹아웃 유효성 확인

<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"를 입력하고 난 행의 START_TIME보다 새 행을 추가 할 때 2 당신은 또한 경우, 깊은 옵션을 사용해야 1.

답변

0

행의 END_TIME 이상이어야합니다 배열에 새 항목을 추가 할 때 작동하지 않는 유효성 검사 그룹을 갖고 싶습니다. 관측 그룹에 유효성 검사 그룹을 래핑하고 계산을 사용하여 저장 버튼을 비활성화 할 수 있습니다.

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