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。以下是将这样的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计算属性，带有validationErrorsChanged ”测试中执行：validationTests.js

如果您喜欢，可能需要在EntityType构建后初始化程序as discussed here内调用它。

额外信用

我不喜欢

$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方法），但我还没有完成整个过程。也许你可以为我们下一步并报告你的发现。

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

1 个答案: