Question

我是一个新手，当谈到使用淘汰赛时，我真的想最大化它在我正在开发的网络中的使用。但是我对浏览器能够收听多个用户事件感到担忧。我相信knockout实现了一个名为valueupdate的属性。到目前为止，我只使用了'afterkeydown＆＃39;和＆＃39;模糊＆＃39;。但我需要我的浏览器同时收听多个事件。以下是我的浏览器应该收听的用户事件：

在页面加载时，我希望输入字段在页面加载时开始验证。
关于模糊，我希望我的输入字段在失去焦点后进行验证。
关键后，我还希望我的字段在用户按下某个键后重新验证它们。
在提交时，虽然我的字段未包含在表单中，但我仍然希望在用户单击＆＃34;保存＆＃34;之后验证我的字段。按钮。

我想到这样的事情：

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

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

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

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"转换为["afterKeyDown"]

希望这有帮助！

Answer 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执行验证测试。

Answer 3

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

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

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

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

具有多个valueUpdates的Knockout

3 个答案: