具有多个 valueUpdates 的淘汰赛答案

【问题标题】：Knockout with multiple valueUpdates具有多个 valueUpdates 的淘汰赛
【发布时间】：2015-05-13 08:18:39
【问题描述】：

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

在页面加载时，我希望我的输入字段在页面加载时开始验证。
在模糊时，我希望我的输入字段在失去焦点后进行验证。
按下键后，我还希望我的字段在用户按下键后自行重新验证。
提交时，虽然我的字段没有包含在表单中，但我仍然想在用户单击“保存”按钮后验证我的字段。

我在想这样的事情：

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

--> 类似的东西，虽然我知道这会导致语法错误，但我希望你明白我的意思。

我知道，这个问题有点令人困惑，但如果您想了解更多详细信息，请不要犹豫，在您的评论中说明。我在这里真的需要帮助。谢谢。

【问题讨论】：

标签： knockout.js

【解决方案1】：

总是很高兴看到“新手”决定切换到 KnockoutJS。任何可以帮助摆脱冗长的临时数据绑定解决方案的世界都是一件很棒的事情。

要回答有关如何关闭多个事件以更新数据绑定值的问题，您可以这样写：

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

在我的例子中，我使用引导程序预先输入来选择一个值，但是在用户从下拉建议框中进行选择后，数据绑定没有被刷新。看了源码后，发现了这个在 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"）转换为 ["afterKeyDown"]

希望这会有所帮助！

【讨论】：

我必须指出事件是小写的，否则它不会起作用 --- valueUpdate: ['blur', 'afterkeydown', 'onload']"
bootstrap typeahead 也是我的问题，绑定处理程序中的好位置
哈哈，我很喜欢我尝试使用数组的方式，而且效果很好。多么长的镜头……如果我错过了什么，就必须查一下。感谢您为我验证这一点。

【解决方案2】：

我制作了一个fiddle，演示了如何验证字段值：

通过显式调用 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();

See fiddle

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

【讨论】：

【解决方案3】：

您应该查看textInput 绑定。这是正确侦听可能影响文本输入字段值的各种事件的最佳方式。

<input data-bind="textInput: userName" />

与值绑定不同，textInput 提供从用于所有类型的用户输入的 DOM，包括自动完成，拖放和剪贴板事件。

http://knockoutjs.com/documentation/textinput-binding.html

【讨论】：