evento knockout JS para cualquier actualización dom viewmodel

Necesito ejecutar un código jquery ui de código cada vez que el DOM se actualiza a través de Knockout.JS. Me doy cuenta de que esto se puede hacer usando enlaces personalizados, pero eso parece estar relacionado con un modelo de vista específico, quiero hacerlo globalmente, ¿así que cada vez que sucede en cualquier modelo de vista, se dispara?evento knockout JS para cualquier actualización dom viewmodel

Digamos que SIEMPRE quiero un JQuery datepicker en todos los cuadros de texto con la clase 'needsdate', en lugar de agregar esto a cada uno de mis modelos de vista, sería genial si pudiera hacerlo globalmente.

¿Esto es posible?

Fuente

2012-02-08 RodH257

¿Puede explicar su situación un poco más? Normalmente, usaría un enlace personalizado que está vinculado a un observable. Cuando eso observable cambia, entonces el enlace se ejecutará sea cual sea el código de la interfaz de usuario de jQuery contra el elemento en el que permanecen las vinculaciones. Existe una forma potencial de hacer lo que está pidiendo, pero me gustaría saber más sobre el caso de uso antes de sugerirlo, ya que no es la forma normal de hacerlo. –

actualicé mi publicación principal: digamos que siempre quiero un fechador de JQuery en todos los cuadros de texto con la clase 'needsdate', en lugar de agregar esto a cada uno de mis modelos de vista, sería genial si pudiera hacerlo globalmente. ¿Eso ayuda? – RodH257

Si no es vinculante para un modelo de vista, entonces probablemente no necesite knockout para esto. –

Si no va a agregar o eliminar elementos dinámicamente, puede conectarlos de la forma habitual. Sin embargo, si está trabajando con contenido dinámico (como usar un array observable que tiene sus elementos modificados), entonces tiene un par de opciones:

1- Como la respuesta here, puede crear un enlace personalizado. Si no desea enlazar el valor de una propiedad en su modelo de vista, entonces se puede simplificar la unión a algo como:

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

Se podría colocarlo en un elemento como:

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

2- la otra opción es utilizar el afterRenderfunctionality del template (y foreach que utiliza template) para cablear sus datepickers después de nuevo contenido se representa.

Fuente

2012-02-08 14:15:32

He creado una función refreshJQuery() que aplica todos mis comportamientos fornidos de una vez. Luego llamo a esta función cuando me suscribo a observables en mi modelo de vista para actualizar mi modelo. Y una vez en la carga de la página.

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

entonces lo uso de la siguiente manera, aunque he identificado otros 2 observables Tengo que llamar a esta función desde también:

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

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

También he implementado @ solución de RPNiemeyer para jQuery terreno suscripciones, así que además de su muestra para un datepicker, tengo un código similar que vuelve a aplicar las etiquetas $.button() a <a> y otra que convierte casillas de verificación en conmutadores de estilo de iPhone.

Fuente

2013-06-11 11:50:42

evento knockout JS para cualquier actualización dom viewmodel

Respuesta

Cuestiones relacionadas