Question

我正在使用击倒扩展器检查天气我的可观察值是否改变？它工作正常，当我的观察结果发生变化时，我收到通知。但为什么它会多次通知我。您继续输入输入，您可以看到控制台中的通知数量增加了吗？如果我输入3个字母，那么淘汰赛应该通知我3次，为什么它会通知我20次？

我的HTML

<div id="mydivhtml"> 
   <input type="text" data-bind="value:$root.Message.extend({ trackMessage: 'xyx'}),valueUpdate : 'afterkeydown'"/>
</div>

我的Js

function MyViewModel() {

    var self = this;
    self.Message = ko.observable("");

    ko.extenders.trackMessage = function (target, message) {

        target.subscribe(function (newValue) {
            console.log('message Changed');
        });

        return target;
    };
}

$(document).ready(function () {
    ko.applyBindings(new MyViewModel(), $('#mydivhtml')[0]);
});

Answer 1

您的值绑定不正确，它应该只包含值observable，您输入的值将在每次输入时激活trackMessage扩展器并且将具有多个订阅，因此多次执行。

只需将您的HTML更改为此。

<div id="mydivhtml"> 
   <input type="text" data-bind="value:$root.Message, valueUpdate : 'afterkeydown'"/>
</div>

你的观点模型就是这个：

function MyViewModel() {

    var self = this;
    self.Message = ko.observable("");

    ko.extenders.trackMessage = function (target, message) {

        target.subscribe(function (newValue) {
            console.log('message Changed');
         });

         return target;
    };

    self.Message.extend({ trackMessage: 'xyx'})
}

$(document).ready(function () {

    ko.applyBindings(new MyViewModel(), $('#mydivhtml')[0]);
});

而且，你可能想要更新你的淘汰库，如果它仍然小于3.2，你可以使用textInput绑定，这样你就可以将你的html更改为更简单的。

<div id="mydivhtml"> 
   <input type="text" data-bind="textInput:$root.Message"/>
</div>

Knockout扩展程序通知会多次触发

1 个答案: