10

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

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

我在想这样的事情：

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

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

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

4

3 回答 3

23

总是很高兴看到“新手”决定切换到 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"]

希望这可以帮助！

于 2013-06-11T17:01:02.750 回答
4

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

  • 通过显式调用 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来执行验证测试。

于 2013-06-03T06:30:07.750 回答
3

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

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

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

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

于 2015-05-13T00:18:39.557 回答