javascript - Documento jQuery listo con Knockout.js
umbraco (3)
Me acaban de lanzar al Umbraco ASP.NET CMS para mi último proyecto, no estoy seguro de si esto es así en general, pero para mi configuración Knockout.js está haciendo todo el trabajo de creación de plantillas.
No estoy muy interesado en knockout.js, pero hasta ahora ha sido bastante sencillo, excepto cuando empiezo a agregar algo de jQuery, el problema es que jQuery está activando antes de que el knockout haya terminado de llenar la página con todos los elementos .
La única solución que me ha funcionado hasta ahora es que todas mis cosas jQuery están envueltas en la función setTimeout (), que obviamente no sirve.
¿Cuál es la forma más eficiente de hacer que jQuery y Knockout funcionen juntos para que jQuery no lo haga antes de que se complete el knockout?
Hace poco tuve el mismo problema con el plugin jSignature y mi vista Knockout. Necesitaba que la vista KO se procesara por completo antes de invocar jSignature; de lo contrario, no se dimensionó correctamente.
Lo arreglé con un enlace de plantilla y una función de devolución de llamada afterRender para invocar el trabajo de jQuery.
Aquí están los documentos de KO:
http://knockoutjs.com/documentation/template-binding.html
Aquí hay un jsfiddle rápido que muestra cómo puede usarlo:
El truco es que puede usar la devolución de llamada afterRender del enlace de la plantilla sin utilizar realmente una plantilla. En cambio, envuelve todo su HTML existente en un div que invocará la devolución de llamada afterRender:
<div data-bind="template: {afterRender: initApp}">
<!-- your existing HTML here -->
</div>
initApp es la función que hace el trabajo jQuery.
Creo que en general debería hacer lo que necesita, aunque si su HTML es particularmente complejo o tiene muchas vistas que debe representar dentro de una página, es posible que deba trabajar un poco más. Déjame saber cómo te va, quizás pueda intentar ayudar un poco más si esto no soluciona tu problema tan fácilmente como lo hizo con el mío.
Actualización - siguiendo el comentario de JACL a continuación - aquí hay una versión extendida del violín que muestra que esta técnica también funciona con ko-if. Cada vez que se muestra u oculta el ''widget'' usando la casilla de verificación, se aplica un color aleatorio diferente para indicar que la función afterRender está haciendo su trabajo.
Puede usar: $(window).load(function(){ /* code */ }); en lugar de $(document).ready();
Quizás window.load en lugar de document.ready hará el truco