1

在 Durandal 应用程序中，我有一个对话框，其中包含绑定到视图模型的视图。

每个输入元素的标签元素都包含一个用 icon-warning-sign 完成的警告字形。每个字形的可见性由数据绑定控制，如下所示：

<div class="form-group">
  <label for="email">
    Email <i class="icon-warning-sign orange" 
      data-bind="visible:Email.hasError, attr: { title:Email.validationMessage }"></i>
  </label>
  <input id="email" class="form-control" type="text" 
    data-bind="value: Email, valueUpdate: 'afterkeydown'" />
</div>

电子邮件是视图模型的可观察属性。hasError 属性是由扩展器创建的子可观察对象。其中有几个，这是一个示例。只有验证实现有所不同。

function prepForExtender(target) {
  if (target.hasError) return;
  target.hasError = ko.observable();
  target.validationMessage = ko.observable();
}

ko.extenders.required = function (target, overrideMessage) {

  prepForExtender(target);

  //define a function to do validation
  function validate(newValue) {
    target.hasError(!newValue);
    target.validationMessage(newValue ? "" : 
      overrideMessage || "This field is required");
  }

  //initial validation
  validate(target());

  //validate whenever the value changes
  target.subscribe(validate);

  //return the original observable
  return target;
};

这是扩展器的示例使用。

register.FirstName = ko.observable()
  .extend({ required: "First name is missing" });

除 IE8 外，一切正常。请不要从花生画廊中嘲笑 IE8，它是客户的 SOE，仅此而已。在 IE8 中，当对话框打开时，警告字形不可见。如果您编辑输入的值，则字形的可见性会正确更新，因此绑定和逻辑可以正常工作。

首次显示对话框时如何触发评估？

更多信息：在转换到 hasError() == true 之前，字形不会变得可见。因此，如果页面以给定输入的 hasError true 开头，那么您必须使 hasError 返回 false 然后再次返回 true 以使字形可见。

4

0 回答 0