Уведомление об отказе от нокаута несколько раз

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

Ваше значение привязки является неправильным, оно должно содержать только значение наблюдаемой, то один вы поставите активирует 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>