Zdarzenie knockout.js, które śledzi każdą zmianę tekstu wewnątrz wejściowego pola tekstowego

Question

Jestem nowy w nokautowaniu js. Chcę wywoływać funkcję za każdym razem, gdy tekst zmienia się w polu tekstowym. Zbadałem abit i zaimplementowałem keyup, keydown i keypress, ale nie działały poprawnie. Jeśli ktokolwiek mógłby mi pomóc, proszę przekierować mnie do jakiegoś dokumentu, który jest przydatny w moim scenariuszu. A jeśli jest jakaś dokumentacja dotycząca wszystkich zdarzeń (wbudowanych i niestandardowych), które są dostępne w nokautowej J, byłoby to naprawdę pomocne.

Mówiąc konkretnie o problemie:

data-bind="value: targetProp, event:{keyup: $parent.changeProp}" 

A w JS:

Inside parent: 
    this.changeProp = function() { 
       if (condition..) { 
         do something... 
       } 
      } 

To nie działa z kluczem w górę. Aby uzyskać proste rozwiązanie, proszę podać mi coś, co będzie sygnalizować długość napisu, który został napisany wewnątrz pola tekstowego (na każdym wprowadzonym i usuniętym tekście). Z góry dziękuję.

Answer 1

Możesz również zasubskrybować zmiany ręcznie.

Upewnij się targetProp jest obserwowalne, a przy budowie rodzica, zapisz się ręcznie do zmian:

parent.targetProp = ko.observable(originalValue); 

parent.targetProp.subscribe(function(newValue) { 
    alert("The new value is " + newValue); 
}); 

---

Edit: dla opcji wiązania:

<select data-bind="options: myObservableArray, value: selectedValue"></select> 

w js :

self.selectedValue = ko.observable(); 

wówczas:

self.selectedValue.subscribe(function(newValue) { 
    alert("The new value is " + newValue); 
}); 

Answer 2

Możesz użyć valueUpdate: 'afterkeydown', która aktualizuje twój model widoku, gdy tylko użytkownik zacznie pisać znak.

data-bind="value: targetProp, valueUpdate: 'afterkeydown'" 

Answer 3

Albo można użyć textInput wiązania z najnowszym KO 3,2

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

Oprócz bieżących aktualizacji, to poprawnie obsługuje wytnij/wklej, przeciąganie, autouzupełniania.

Answer 4

Jeśli chcesz obliczyć w czasie rzeczywistym, tak jak osoba pisząca, możesz to zrobić.

HTML

<input type="text" id="description" class="form-control" maxlength="255" 
data-bind="value:description, event:{keyup:calcDescriptionCount}"> 
<br> 
<span data-bind="text:descriptionCount"></span> charactors left. 

ViewModel JS

self.description = ko.observable(""); 
self.descriptionCount = ko.observable(255); 
self.calcDescriptionCount = function(){ 
    this.descriptionCount(255 - $("#description").val().length); 
};