9

我有一个带有一些必需属性的简单视图模型...如果相应的属性无效，我希望每个输入突出显示红色，但我不希望在最初加载页面时显示此突出显示...仅当值更改或用户尝试保存/继续时...

现在它正在验证初始加载时的视图模型，因为我指定了 data-bind="css: { error: name.isValid() == false }"，但我不知道有任何其他方法可以得到这个动态工作（类似于 jQuery 非侵入式验证的工作方式）......

var foo = { name: ko.observable().extend({required: true}) };

<div data-bind="css: { error: !name.isValid() }">
    <input type="text" data-bind="value: name" />
</div>

任何关于如何使这项工作的想法将不胜感激......谢谢！

4

2 回答 2

5

更好的方法是配置敲除验证以使用 validationElement 类装饰元素。这是通过添加此配置选项来完成的：

ko.validation.configure({ decorateElement: true });

单击此处查看演示此操作的 jsfiddle。

****编辑，回应提问者的评论***

如果需要对父元素进行装饰，更优雅和可重用的解决方案是将此自定义绑定应用到父元素。

Javascript

ko.bindingHandlers.parentvalElement = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var valueIsValid = valueAccessor().isValid();
        if(!valueIsValid && viewModel.isAnyMessageShown()) {
            $(element).addClass("parentError");
        }
        else {
            $(element).removeClass("parentError");
        }
    }
};

并在您的 HTML 中应用绑定，如下所示：

<form data-bind='submit:OnSubmit'>
    <label data-bind='parentvalElement:name'>
        <span>Name</span>
        <input data-bind="value: name" />
    </label>
    <input type='submit' value='submit' />
<form>

看看这个更新的 jsfiddle 以了解它的实际效果。

于 2013-06-05T21:29:14.700 回答
2

所以，这是我想出的解决方案：

var Foo = function()
{
    this.name = ko.observable().extend({required: true}).isModified(false);
    this.validate: function()
    {
        if (!this.isValid())
        {
            //... loop through all validated properties and set .isModified(true)
            return false;
        }
        return true;
    };
    ko.validation.group(foo);
};

var Bar = function()
{
   this.foo = new Foo();
   this.errors = ko.observableArray([]); //<-- displays errors for entire page
   this.save = function()
   {
       if (!this.foo.validate())
       {
          this.errors(ko.toJS(this.foo.errors()));
       }
   };
}

ko.applyBindings(new Bar());

这是标记...

<div data-bind="with: foo">
    <div class="control-group"
         data-bind="css: { error: name.isModified() && !name.isValid() }">
        <label class="control-label">Name<span class="help-inline">*</span></label>
        <div class="controls">
            <input type="text" class="input-block-level" placeholder="Name"
                   data-bind="value: name, event: { blur: function () { name.isModified(true); }}" />
        </div>
    </div>

    <div class="alert alert-error"
         data-bind="visible: $parent.errors().length > 0">
        <h5>Errors!</h5>
        <ul data-bind="foreach: $parent.errors()">
            <li data-bind="text: $data"></li>
        </ul>
    </div>
</div>

<button type="submit" class="btn btn-primary" data-bind="click: save">Save</button>

这是CSS

.error { color: Red; font-weight: bold; }
.help-inline { display: none; }
.error .help-inline { display: inline-block; }
.error input { border-color: Red; }
于 2013-06-05T22:15:34.840 回答