Knockout.JS: Triggers dựa trên những thay đổi trong một quan sát

Question

Tôi có một yếu tố đầu vào được ràng buộc với một loại trực tiếp quan sát được:

<input type="text" data-bind="value: myText, valueUpdate: 'keyup'" /> 

này cập nhật các thể quan sát được trên mỗi KeyUp. Bây giờ tôi muốn kích hoạt các sự kiện bổ sung khi giá trị thay đổi.

Sau đây thực hiện điều này trên nguyên tắc:

this.myTextTrigger = ko.computed(function() { 
    console.log(this.myText()); 
}, this); 

Tuy nhiên, có vẻ như hơi vụng về. Nó cũng kích hoạt trên sự khởi tạo ban đầu của mẫu, nơi mà tôi chỉ muốn xử lý các thay đổi sau đó. Có cách nào chính thức/dễ dàng hơn để kích hoạt sự kiện dựa trên những thay đổi đối với các quan sát không?

Answer 1

Sử dụng đăng ký:

this.myText.subscribe(function (newText) { 
    console.log(newText); 
}); 

Nếu bạn muốn sử dụng lại kích hoạt này, bạn có thể xem xét writting một custom binding.

Answer 2

Nếu bạn đang cố gắng để có được thông tin thêm trong ràng buộc của bạn sau đó sử dụng allBindings.get(nameOfOtherBinding) và thiết lập các thông số nameOfOtherBinding để đề cập đến tên của các ràng buộc trong đó yếu tố được trỏ đến một hàm. Hoặc là đặt hàm theo nghĩa đen trong HTML hoặc đảm bảo rằng bạn có thể tìm thấy hàm đó trong phạm vi định nghĩa trình xử lý (như được gắn liền với đối tượng window trên toàn cầu).

http://knockoutjs.com/documentation/custom-bindings.html

JS Fiddle Example - http://jsfiddle.net/pqb4xubg/

Các javascript rằng sẽ thiết lập xử lý (hoặc trong init hoặc cập nhật):

ko.bindingHandlers.generic = { 
    init: function(element, valueAccessor, allBindings){ 
     var val = 'nothing'; 
     // set your other bindings to get pulled in 
     var func = allBindings.get('func'); 
     // normal check if the binding is actually a function 
     if(typeof func === 'function'){ 
      // use the retrieved function 
      val = func(valueAccessor()); 
     } 
     element.innerText = val; 
    } 
}; 
var model = {a:'4', b:5}; 
ko.applyBindings(model); 

Các html đó sẽ sử dụng bộ xử lý (thông báo cách các yếu tố có liên kết "vui nhộn" không hoạt động):

<div data-bind="generic: a, func: function(val){ return val + 2; }"></div> 
<div data-bind="generic: a, fun: function(val){ return val + 2; }"></div> 
<div data-bind="text: a"></div> 
<div data-bind="generic: b, func: function(val){ return val + 2; }"></div> 
<div data-bind="generic: b, fun: function(val){ return val + 2; }"></div> 
<div data-bind="text: b"></div> 

Bạn cũng có thể chỉ sử dụng init của liên kết để thiết lập trình xử lý sự kiện DOM chuẩn và chỉ gọi một cách rõ ràng các hàm đó bằng cách sử dụng một cái gì đó như jQuery. Cảm ơn bạn. Ngày tốt.