Sự kiện knockout.js theo dõi mọi thay đổi văn bản bên trong hộp văn bản đầu vào

Question

Tôi là người mới loại trực tiếp js. Tôi muốn gọi hàm mỗi lần văn bản thay đổi bên trong hộp văn bản. Tôi nghiên cứu abit và thực hiện keyup, keydown và keypress nhưng chúng không hoạt động đúng cách. Nếu ai đó có thể cho tôi một giải pháp hoặc hãy chuyển hướng tôi đến một số tài liệu hữu ích cho kịch bản của tôi. Và nếu có một số loại tài liệu về tất cả các sự kiện (sẵn có và tùy chỉnh) có sẵn trong J loại trực tiếp, điều đó sẽ thực sự hữu ích.

Để cụ thể về vấn đề này:

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

Và trong Js:

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

Nó không làm việc với chìa khóa lên. Đối với giải pháp đơn giản, xin vui lòng cho tôi một cái gì đó sẽ cảnh báo độ dài của chuỗi đã được viết bên trong một hộp văn bản (trên mỗi văn bản nhập vào và xóa). Cảm ơn trước.

Answer 1

Bạn cũng có thể đăng ký các thay đổi theo cách thủ công.

Hãy chắc chắn rằng targetProp là một quan sát được, và khi xây dựng phụ huynh, đăng ký bằng tay với những thay đổi:

parent.targetProp = ko.observable(originalValue); 

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

---

Edit: cho một tùy chọn ràng buộc:

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

trong js :

self.selectedValue = ko.observable(); 

thì:

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

Answer 2

Bạn có thể sử dụng valueUpdate: 'afterkeydown' cập nhật mô hình chế độ xem của bạn ngay sau khi người dùng bắt đầu nhập một ký tự.

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

Answer 3

Hoặc bạn có thể sử dụng textInput ràng buộc từ mới nhất KO 3,2

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

Ngoài cập nhật trực tiếp, nó xử lý một cách chính xác cắt/dán, kéo, autocomplete.

Answer 4

Nếu bạn muốn tính toán theo thời gian thực, khi người đó đang nhập, bạn có thể thực hiện việc này.

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