Evento JS Knockout per qualsiasi aggiornamento dom viewmodel

Question

Ho bisogno di eseguire un bit di codice jquery ogni volta che il DOM viene aggiornato tramite Knockout.JS. Mi rendo conto che questo può essere fatto usando i binding personalizzati, ma sembra essere correlato a uno specifico viewmodel, voglio farlo globalmente in modo che ogni volta che accade su qualsiasi viewmodel si spari?

Diciamo che SEMPRE desidero un DatePicker JQuery su tutte le caselle di testo con classe 'needsdate', piuttosto che aggiungerlo a ciascuno dei miei modelli di vista, sarebbe bello se potessi farlo globalmente.

È possibile?

Answer 1

Se non si sta aggiungendo/rimuovendo in modo dinamico gli elementi, è possibile semplicemente collegarli normalmente. Tuttavia, se stai lavorando con contenuti dinamici (come l'uso di un osservableArray che ha gli elementi modificati), hai un paio di opzioni:

1- Come la risposta here, puoi creare un binding personalizzato. Se non si desidera associare il valore a una proprietà del modello di vista, allora si può semplificare il legame con qualcosa di simile:

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

Si potrebbe metterlo su un elemento come:

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

2- l'altra opzione è quella di utilizzare il afterRenderfunctionality del template (e foreach che utilizza template) per cablare i tuoi datepickers dopo il nuovo contenuto viene reso.

Answer 2

Ho creato una funzione refreshJQuery() che applica tutti i miei comportamenti muscolosi in una volta sola. Quindi chiamo questa funzione quando mi iscrivo agli osservabili nel mio modello di vista per aggiornare il mio modello. E una volta caricato a pagina.

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

poi lo uso come segue, anche se ho identificato 2 altre osservabili ho bisogno di chiamare questa funzione da anche:

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

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

Ho anche implementato @ soluzione RPNiemeyer per il livello di campo JQuery abbonamenti, quindi oltre al suo esempio per un datepicker, ho un codice simile che riapplica i tag $.button() a <a> e un altro che converte le caselle di controllo in switch di stile iPhone.