如何在breeze.js中使用Data-Bind显示Validationerror

Question

我试图找到一种方法,以一种类似于MVC中的ASP.NET(验证错误)的方式在HTML表格中正在编辑的字段下显示验证错误消息.

任何样品或链接将不胜感激.

这是我尝试过的.它没有立即更新错误消息,因为我认为它不是一个可观察的.

<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不是Knockout可观察的.它只是一个函数,它返回实体当前Breeze验证错误的集合.

但是有一个事件可以监听该集合的更改.在有事件的地方,有一种方法可以创建一个可以绑定的KO observable.以下是向实体添加此类可观察对象的一种方法.

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

然后你应该能够写出如下内容:

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

该addhasValidationErrorsProperty方法在DocCode中的" Trigger KO computed property with validationErrorsChanged "测试中执行:validationTests.js

如果您喜欢它,您可能希望在此处讨论EntityType的构造后初始化程序中调用它.

额外信用

我不喜欢

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

我希望我能把它变成每个Breeze实体的功能,但Breeze实体没有基本类型.

您可以使用此类函数扩展特定Breeze实体类型的原型.也许最好的时间是在使用hasValidationErrors属性配置该类型时.

假设我们正在使用Employee实体类型.在应用程序引导的早期,我们可以编写:

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

现在你应该能够像这样绑定:

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

我已经测试了这种方法的部分(例如getFirstValErrMsg扩展和addhasValidationErrorsProperty方法),但我还没有完成整个过程.也许您可以为我们采取下一步并报告您的发现.