jQuery documento pronto con Knockout.js

Question

Sono appena stato gettato nel CMS di ASP.NET di Umbraco per il mio ultimo progetto, non sono sicuro se questo è il modo su tutto il pannello ma per il mio setup Knockout.js sta facendo tutto template.

Non sono troppo entusiasta di knockout.js ma finora è stato abbastanza semplice, tranne quando inizio ad aggiungere in alcune cose jQuery, il problema che sto riscontrando è jQuery sta sparando prima che knockout abbia finito di compilare la pagina con tutti gli elementi.

L'unica soluzione che ha funzionato per me finora è tutta la mia roba jQuery è avvolta nella funzione setTimeout(), che ovviamente non va bene.

Qual è il modo più efficiente per fare in modo che jQuery e Knockout lavorino insieme, quindi jQuery non lo fa prima che l'eliminazione avvenga?

Answer 1

Forse window.load invece di document.ready farà il trucco

Answer 2

Recentemente ho avuto lo stesso problema con il plugin jSignature e la mia vista Knockout. Avevo bisogno che la vista KO fosse completamente renderizzata prima di invocare jSignature, altrimenti non si dimensionava correttamente.

L'ho risolto con un collegamento di modello e una funzione di callback afterRender per richiamare il lavoro di jQuery.

Ecco la documentazione KO:

http://knockoutjs.com/documentation/template-binding.html

Ecco un jsfiddle rapido che mostra come si può utilizzare:

http://jsfiddle.net/PCbFZ/

Il trucco è che è possibile utilizzare il callback AfterRender del associazione di modelli senza utilizzare effettivamente un modello. Invece, si avvolge tutto il vostro HTML esistente in un div che richiamare il callback AfterRender:

<div data-bind="template: {afterRender: initApp}"> 
    <!-- your existing HTML here --> 
</div> 

initApp è la funzione che fa il lavoro jQuery.

Penso che in genere dovresti fare ciò che ti serve, anche se il tuo HTML è particolarmente complesso, o hai molte viste che devi rendere all'interno di una pagina, potresti dover fare un po 'più di lavoro. Fammi sapere come vai avanti - forse posso provare ad aiutarti un po 'di più se questo non risolve il problema con la stessa facilità con cui lo ha fatto mio!

---

Update - a seguito del commento da JACL qui sotto - qui è una versione estesa del violino che mostra questa tecnica di lavoro anche con il ko-se. Ogni volta che mostri/nascondi il 'widget' usando la casella di controllo, viene applicato un colore casuale differente per indicare che la funzione afterRender sta facendo il suo lavoro.

http://jsfiddle.net/PCbFZ/15/

Answer 3

È possibile utilizzare: $(window).load(function(){ /* code */ }); invece di $(document).ready();