使用 Bootstrap Popover 进行 KnockoutJS 验证

Question

差不多了，只需要在点击提交按钮后弹出框出现，并且该字段添加了一个警报类。

注意：悬停仅适用于绑定处理程序中的 isValid 为真，否则测试不为真需要单击而不是悬停：S

http://jsfiddle.net/hotdiggity/UUb4M/

HTML：

<input data-bind="value: lastName, popover: isValidField" data-placement="below" data-title="Alert" data-content="We have identified this information is incorrect and must be updated."/>

JS：

self.lastName = ko.observable().extend({ required: true });
self.isValidField = ko.observable();
this.submit = function () {
    if (self.errors().length === 0) {
        alert('Thank you.');
    } else {
        self.errors.showAllMessages();
        self.isValidField(self.lastName.isValid());
    }
};

绑定：

ko.bindingHandlers.popover = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var value = valueAccessor(),
            valueUnwrap = ko.unwrap(value),
            allBindings = allBindingsAccessor(),
            isValid = allBindings.value;
        if (isValid) {
            $(element).popover({
                trigger: "hover"
            });
        } else {
            $(element).popover("hide");
        }
    },
    Update: //See jsfiddle link above (the same code)

Answer 1

这是适合您的工作版本。仅当未满足 lastName 字段的验证且仅在单击提交按钮时才会出现弹出框。如果用户在lastName 字段中输入内容，它就会消失。看到这个updated fiddle

绑定处理程序的update 函数创建了对其访问的可观察对象的依赖关系，因此本质上，绑定处理程序的update 将在该可观察对象发生更改时被触发。在你的情况下，我使用 isValidField observable 做到了。见代码中的注释

var viewModel = function () {
    var self = this;
    self.lastName = ko.observable().extend({ required: true });
    self.isValidField = ko.observable();

    // once the popover is shown, we want it to go away if the user types something
    // into the lastName field. We do this by triggering the popover binding handler
    // by changing the value of isValidField
    self.lastName.subscribe(function(val){          
        if(val && val.length > 0){ self.isValidField(true); }
    });

    // need to create your errors object
    self.errors = ko.validation.group(self);

    this.submit = function () {
        if (self.errors().length === 0) {
            alert('Thank you.');
        } else {
            self.errors.showAllMessages();

            // change the value of isValidField to trigger the popover binding handler's
            // update
            self.isValidField(self.lastName.isValid());
        }            
    };      
};

ko.bindingHandlers.popover = {

    update: function (element, valueAccessor, allBindingsAccessor) {
        var value = valueAccessor(),
            valueUnwrap = ko.unwrap(value);

        if (valueUnwrap === false) {
            $(element).popover('show');
        } else {
            $(element).popover("destroy");
        }
    }
};