Sự kiện JS loại bỏ cho bất kỳ cập nhật bản cập nhật nào của viewmodel

Question

Tôi cần chạy một đoạn mã jquery ui bất cứ khi nào DOM được cập nhật qua Knockout.JS. Tôi nhận ra điều này có thể được thực hiện bằng cách sử dụng các ràng buộc tùy chỉnh, nhưng dường như có liên quan đến một viewmodel cụ thể, tôi muốn làm nó trên toàn cầu để bất cứ khi nào nó xảy ra trên bất kỳ viewmodel nó cháy?

Cho phép nói rằng LUÔN LUÔN muốn một trình ghi ngày tháng JQuery trên tất cả các hộp văn bản với lớp 'nhu cầu', thay vì thêm vào mỗi mô hình xem của tôi, sẽ tuyệt vời nếu tôi có thể làm điều đó trên toàn cầu.

Điều này có khả thi không?

Answer 1

Nếu bạn sẽ không tự động thêm/xóa các phần tử, thì bạn chỉ có thể nối chúng lên như bình thường. Tuy nhiên, nếu bạn đang làm việc với nội dung động (như sử dụng một ObservableArray có các mục được sửa đổi), thì bạn có một vài tùy chọn:

1- Giống như câu trả lời here, bạn có thể tạo một ràng buộc tùy chỉnh. Nếu bạn không muốn để ràng buộc các giá trị cho một tài sản trên mô hình quan điểm của bạn, sau đó bạn có thể đơn giản hóa các ràng buộc để một cái gì đó như:

ko.bindingHandlers.datepicker = { 
    init: function(element, valueAccessor) { 
     //initialize datepicker with some optional options 
     var options = ko.utils.unwrapObservable(valueAccessor()); 
     $(element).datepicker(options); 

     //handle disposal (if KO removes by the template binding) 
     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
      $(element).datepicker("destroy"); 
     }); 
    } 
}; 

Bạn sẽ đặt nó trên một yếu tố như:

<input data-bind="datepicker: { minDate: new Date() }" />

2- tùy chọn khác là sử dụng afterRenderfunctionality của template (và foreach trong đó sử dụng template) để dây lên datepickers của bạn sau khi nội dung mới được trả lại.

Answer 2

Tôi đã tạo một hàm refreshJQuery() áp dụng tất cả các hành vi của tôi trong một lần. Sau đó tôi gọi hàm này khi tôi đăng ký các quan sát trong mô hình xem của mình để cập nhật mô hình của mình. Và một lần khi tải trang.

function refreshJQuery() { 
    $(".draggable, .droppable, .resizable").each(function() { 

     var $element = $(this); 

     if ($element.hasClass("draggable") && !$element.data("init-draggable")) { 
      $element.data("init-draggable", true).draggable(dragBehavior); 
     } 
     if ($element.hasClass("droppable") && !$element.data("init-droppable")) { 
      $element.data("init-droppable", true).droppable(dropBehavior); 
     } 
     if ($element.hasClass("resizable") && !$element.data("init-resizable")) { 
      $element.data("init-resizable", true).resizable(resizeBehavior); 
      $(this).children().fadeTo(2000, 0); 
      $element.hover(function() { 
       $(this).children().fadeTo(200, 1); 
      }, 
      function() { 
       $(this).children().fadeTo(750, 0); 
      }); 
     } 
    }); 
}; 

sau đó tôi sử dụng nó như sau, mặc dù tôi đã xác định được 2 quan sát khác mà tôi cần phải gọi chức năng này từ cũng:

this.updateTime = function() { 
    service.updateBookingTimes(this.id(), this.startDate(), this.endDate()); 
    refreshJQuery(); 
}; 

this.startDate.subscribe(this.updateTime, this); 
this.endDate.subscribe(this.updateTime, this); 

Tôi cũng đã thực hiện giải pháp @ RPNiemeyer cho cấp cơ sở JQuery đăng ký, do đó, ngoài mẫu của anh ấy cho một datepicker, tôi có mã tương tự mà áp dụng lại các thẻ $.button() đến <a> và một thẻ khác chuyển đổi hộp kiểm thành các công tắc kiểu iPhone.