Zdarzenie Knockout JS dla każdej aktualizacji domena viewmodel

Question

Potrzebuję uruchomić kawałek kodu jquery ui, gdy DOM jest aktualizowany przez Knockout.JS. Zdaję sobie sprawę, że można to zrobić za pomocą niestandardowych powiązań, ale wydaje się, że jest to związane z konkretnym modelem widoku, chcę to zrobić globalnie, więc ilekroć zdarza się to na dowolnym modelu widoku, jest on uruchamiany?

Powiedzmy, że ZAWSZE chcę mieć datepicker JQuery we wszystkich polach tekstowych z klasą "needsdate", zamiast dodawać to do każdego z moich modeli widoków, byłoby świetnie, gdybym mógł to zrobić globalnie.

Czy to możliwe?

Answer 1

Jeśli nie zamierzasz dynamicznie dodawać/usuwać elementów, możesz po prostu je podłączyć tak, jak zwykle. Jeśli jednak pracujesz z dynamiczną zawartością (np. Używając obserwowalnego elementu, który ma zmodyfikowane elementy), masz kilka opcji:

1- Podobnie jak odpowiedź here, możesz utworzyć niestandardowe powiązanie. Jeśli nie chcą wiązać się wartość nieruchomości na swoim modelu widoku, a następnie można uprościć wiązanie coś takiego:

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

Można by umieścić go na elemencie jak:

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

2- Inną opcją jest stosowanie afterRenderfunctionality z template (i foreach który wykorzystuje template) drut swoje datepickers od nowa treść jest wyświetlana.

Answer 2

Stworzyłem funkcję refreshJQuery(), która stosuje wszystkie moje atrakcyjne zachowania za jednym razem. Następnie wywołuję tę funkcję, gdy subskrybuję obserwowalne w moim modelu widoku, aby zaktualizować mój model. I raz na stronie ładowania.

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

I następnie używać go w następujący sposób, jakbym identyfikowane 2 inne obserwable muszę wywołać tę funkcję z również:

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

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

Ja również realizowany @ rozwiązania RPNiemeyer za szczeblu terenowym JQuery subskrypcji, więc oprócz jego próbki dla datepicker, mam podobny kod, który ponownie przypisuje znaczniki $.button() do <a> i inny, który konwertuje pola wyboru na przełączniki stylu iPhone.