跟踪输入文本框中的每个文本更改的 Knockout.js 事件

Question

I'm new to knockout js. I want to call a function every time a text changes inside a text box. I researched a bit and implemented keyup , keydown and keypress but they didn't work properly. If anybody could give me a solution or please redirect me to some document that is helpful for my scenario. And If there is some sort of documentation about all of the events (inbuilt and custom) that are available in knockout Js, that would be really helpful.

To be specific about the problem:

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

And in Js:

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

It's not working with key up. For simple solution, please give me something that will alert the length of the string that has been written inside a textbox (on every text entered and deleted).

Answer 1

您可以使用valueUpdate: 'afterkeydown'它在用户开始输入字符后立即更新您的视图模型。

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

Answer 2

Or you can use textInput binding from the latest KO 3.2

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

Apart from live updates, it correctly handles cut/paste, dragging, autocomplete.

Answer 3

You can also subscribe to the changes manually.

Make sure the targetProp is an observable, and when building the parent, subscribe manually to the changes :

parent.targetProp = ko.observable(originalValue);

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

---

Edit: for an option binding:

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

in js:

self.selectedValue = ko.observable();

then:

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

Answer 4

If you want to calculate in real time, as the person is typing, you can do this.

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);
};