breeze.js에서 데이터 바인딩을 사용하여 Validationerror를 표시하는 방법

Question

ASP.NET (유효성 검사 오류)과 유사한 방식으로 HTML 테이블에서 편집중인 필드 바로 아래에 유효성 검사 오류 메시지를 표시하는 방법을 찾으려고합니다. MVC에서.

샘플 또는 링크를 제공해 주시면 감사하겠습니다.

다음은 내가 시도한 것입니다. 그것은 관찰 할 수 없다고 가정하기 때문에 오류 메시지를 즉시 업데이트하지는 않습니다.

<script id="editTmpl" type="text/html"> 
    <tr> 
     <td><input data-bind="value: Country_Code "/> 

      <div data-bind="if: $data.entityAspect.getValidationErrors().length>0"> 
      <pre data-bind="text: $data.entityAspect.getValidationErrors('Country_Code')[0].errorMessage "></pre> 
     </div> 


     </td> 
     <td><input data-bind="value: Country_Name"/></td> 
     <td class="buttons"> 
      <a class="btn btn-success" data-bind="click: $root.save" href="#" title="save"><i class="icon-ok"></i></a> 
      <a class="btn" data-bind="click: $root.cancel" href="#" title="cancel"><i class="icon-trash"></i></a> 
     </td> 
    </tr> 
</script> 

Answer 1

당신은 getValidationErrors이 관찰 녹아웃하지 못했습니다 점이다. 이는 단순히 엔터티의 현재 Breeze 유효성 검사 오류 컬렉션을 반환하는 함수입니다.

하지만 해당 컬렉션의 변경 사항을 수신 대기하는 이벤트가 있습니다. 이벤트가있을 경우 바인딩 할 수있는 KO 관찰 가능 항목을 만드는 방법이 있습니다. 엔티티에 그러한 관찰 가능 요소를 추가하는 한 가지 방법이 있습니다. 그런 다음

 
function addhasValidationErrorsProperty(entity) { 

    var prop = ko.observable(false); 

    var onChange = function() { 
     var hasError = entity.entityAspect.getValidationErrors().length > 0;   
     if (prop() === hasError) { 
      // collection changed even though entity net error state is unchanged 
      prop.valueHasMutated(); // force notification 
     } else { 
      prop(hasError); // change the value and notify 
     } 
    }; 

    onChange();    // check now ... 
    entity.entityAspect // ... and when errors collection changes 
     .validationErrorsChanged.subscribe(onChange); 

    // observable property is wired up; now add it to the entity 
    entity.hasValidationErrors = prop; 
} 

당신과 같이 쓸 수 있어야 :

addhasValidationErrorsProperty 방법은 "validationErrorsChanged와 트리거 KO 계산 재산의"내에서 수행되는

 
    <div data-bind="if: hasValidationErrors"> 
    <pre data-bind="text: $data.entityAspect.getValidationErrors('Country_Code')[0].errorMessage "></pre> 
    </div> 

시험 DocCode에서 : validationTests.js

을

마음에 드시면 EntityType 사후 이니셜 라이저 as discussed here 내에서 호출하고 싶을 것입니다.

추가 신용

나는 내가 기본 유형이없는 모든 브리즈 엔티티하지만 브리즈 개체의 함수로 그것을 돌 수 있었다 바랍니다

 
$data.entityAspect.getValidationErrors('Country_Code')[0].errorMessage 

좋아 아니에요.

이러한 기능을 사용하여 특정 Breeze 엔티티 유형의 프로토 타입을 확장 할 수 있습니다. 아마도 가장 좋은 시간은 hasValidationErrors 속성을 사용하여 해당 유형을 구성하는 경우입니다.

Employee 엔티티 유형으로 작업한다고 가정 해 보겠습니다. 어딘가 초기 응용 프로그램 부트 스트랩에서 우리가 쓸 수 있습니다 :이 방법 (예를 들어 getFirstValErrMsg 확장과 addhasValidationErrorsProperty 방법의

 
    <div data-bind="if: hasValidationErrors"> 
    <pre data-bind="text: $data.getFirstValErrMsg('Country_Code')"></pre> 
    </div> 

내가 테스트 한 조각 :

 
var store = manager.metatdataStore; // one way to get the MetadataStore 

// a dummy employee constructor; maybe you have a real one 
var employeeCtor = function() {}; 

// extend its prototype with the helper method 
employeeCtor.prototype.getFirstValErrMsg = function (pname) { 
     var errs = this.entityAspect.getValidationErrors(pname); 
     return (errs.length) ? errs[0].errorMessage : ""; 
    }; 

// register both the ctor and the initializer 
store.registerEntityTypeCtor(
     "Employee", 
     employeeCtor,     // custom ctor 
     addhasValidationErrorsProperty); // initializer 

이제과 같이 결합 할 수 있어야한다) 그러나 나는 아직 모든 것을 잊지 않고있다. 어쩌면 당신은 우리를 위해 다음 단계를 밟아보고 결과를보고 할 수 있습니다.