具有多个valueUpdates的Knockout

Question

在使用淘汰赛时,我是新手,我真的想在我正在开发的网络中最大限度地利用它.但是我对浏览器能够收听多个用户事件感到担忧.我相信knockout实现了一个名为valueupdate的属性.到目前为止,我只使用了'afterkeydown'和'blur'.但我需要我的浏览器同时收听多个事件.以下是我的浏览器应该收听的用户事件:

1. 在页面加载时,我希望我的输入字段开始在页面加载时进行验证.
2. 在模糊时,我希望我的输入字段在失去焦点后进行验证.
3. 在按下键之后,我还希望我的字段在用户按下键后重新验证它们.
4. 在提交时,虽然我的字段未包含在表单中,但我仍然希望在用户单击"保存"按钮后验证我的字段.

我在考虑这样的事情:

<input data-bind="value:someObservable, valueUpdate:'blur' + 'afterKeyDown' + 'onLoad' + 'onClickOfSaveButton'" />

- >类似的东西,虽然我知道这会导致语法错误,但我希望你明白我的观点.

我知道,这个问题有点令人困惑,但如果你想了解更多细节,请不要犹豫,在你的评论中加以说明.我真的需要帮助.谢谢.

Answer 1

总是很高兴看到一个'新手'决定切换到KnockoutJS.任何能够帮助世界摆脱冗长的临时数据绑定解决方案的东西都是一件很棒的事情.

要回答有关如何键入多个事件以更新数据绑定值的问题,您可以编写:

<input data-bind="value:someObservable, valueUpdate: ['blur', 'afterKeyDown', 'onLoad']"/>

在我的例子中,我使用bootstrap typeahead来选择一个值,但是在用户从下拉列表建议框中进行选择后,数据绑定没有被刷新.在查看源代码后,我发现了KO文档中未提及的这个隐藏的小宝石.

我畏缩地告诉任何人"去读源",但是如果你正在处理文档中没有涉及的边缘案例,不要害怕!通过这样做,我发现了许多未记录的功能

来源:https://github.com/knockout/knockout/blob/master/src/binding/defaultBindings/value.js

ko.bindingHandlers['value'] = {
    'init': function (element, valueAccessor, allBindingsAccessor) {
        // Always catch "change" event; possibly other events too if asked
        var eventsToCatch = ["change"];
        var requestedEventsToCatch = allBindingsAccessor()["valueUpdate"];
        var propertyChangedFired = false;
        if (requestedEventsToCatch) {
            // Allow both individual event names, and arrays of event names
            if (typeof requestedEventsToCatch == "string")       
                requestedEventsToCatch = [requestedEventsToCatch];
            ko.utils.arrayPushAll(eventsToCatch, requestedEventsToCatch);
            eventsToCatch = ko.utils.arrayGetDistinctValues(eventsToCatch);
        }
    .... truncated ....

根据您对编写绑定的熟悉程度,valueUpdate绑定可能非常明显地处理一系列事件.在这里,他们获得了补充绑定"valueUpdate"并将其存储在其中 var requestedEventsToCatch .下一个注释标记了处理一系列事件以更新值的逻辑 - 实际上它们甚至会转换一个事件,例如"afterKeyDown" to["afterKeyDown"]

希望这可以帮助!

Answer 2

我制作了一个小提琴来演示如何验证字段值：

• 通过显式调用 isValid 进行加载
• 当“valueUpdate :afterKeyDown”参数更改值时
• 在发送数据之前，在提交方法中显式调用 isValid。

看法 ：

<div>
    <input type="text" data-bind="value: name, valueUpdate : 'afterkeydown'" />
    <br/>
    <button data-bind="click: submit">Submit</button> 
</div>

JS：

ko.validation.configure({
    decorateElement: true, // add 'validationElement' class on invalid element
});

var VM = function () {
    var self = this;
    self.name = ko.observable("0").extend({
        minLength: 3
    });
    self.isValid = function () {
        self.name.valueHasMutated();
        return self.name.isValid();
    }

    self.submit = function () {
        if (self.isValid()) {
            // server call
        }
    };
};

var vm = new VM();
ko.applyBindings(vm);
vm.isValid();

参见小提琴

我使用knockout.validation来执行验证测试。