KnockoutJS tùy chỉnh ràng buộc bắn nhiều lần

Question

Tôi đang cố gắng hiển thị thông báo DIV bằng cách sử dụng ràng buộc tùy chỉnh, đồng thời cũng điều chỉnh CSS và HTML của DIV qua 2 quan sát.

vấn đề là khi tôi thay đổi giá trị của 2 quan sát đó, nó cũng kích hoạt ràng buộc tùy chỉnh cũng vì một số lý do.

mẫu:

<div class="alert top-alert" data-bind="fade: topMessageShow, css: topMessageType, html: topMessage"></div> 

Tuỳ chỉnh Handler:

ko.bindingHandlers.fade = { 
    update: function resolveFade(element, valueAccessor, allBindingsAccessor) { 
    if (ko.utils.unwrapObservable(valueAccessor())) { 
     $(element).hide().delay(300).fadeIn('slow'); 
    } else { 
     // fade out the notification and reset it 
     $(element).fadeOut('slow', function() { 
     // reset those 2 observables that set class and HTML of the notification DIV 
     MyClass.topMessageType(''); 
     MyClass.topMessage(''); 
     }); 
    } 
    } 
}; 

Triggering Code:

MyClass.topMessageType('alert-info'); 
MyClass.topMessage(msg); 
MyClass.topMessageShow(true); 

---

JSFiddle:http://jsfiddle.net/UrxXF/1/

Answer 1

này liên quan đến thực tế là tất cả các bindings bắn nhau trên một yếu tố duy nhất. Đây là bài đăng mô tả hành vi hiện tại: http://www.knockmeout.net/2012/06/knockoutjs-performance-gotcha-3-all-bindings.html. Điều này thực sự thay đổi trong KO 3.0, nơi các ràng buộc được duy trì độc lập trên một phần tử.

Một lựa chọn mà bạn có thể sử dụng cho bây giờ là thiết lập riêng computed của bạn trong hàm init như:

ko.bindingHandlers.fade = { 
    init: function resolveFade(element, valueAccessor, allBindingsAccessor) { 
     ko.computed({ 
     read: function() { 
      /your logic goes here 
     }, 
     disposeWhenNodeIsRemoved: element 
     }); 
    } 
}; 

Với kỹ thuật này, bạn đang mô phỏng update chức năng, nhưng cho phép nó hoạt động một cách độc lập từ các ràng buộc khác trên phần tử. Hạn chế nhỏ duy nhất là bạn sẽ không nhận được bất kỳ sự phụ thuộc nào từ các quan sát được mở trong chuỗi liên kết (như fade: topMessageShow() thay vì fade: topMessageShow).