Dokument jQuery gotowy z Knockout.js

Question

Właśnie zostałem wrzucony do Umbraco ASP.NET CMS dla mojego ostatniego projektu, nie jestem pewien, czy tak to wygląda, ale dla mojej konfiguracji Knockout.js robi wszystko szablonowanie.

Nie jestem zbyt zagorzałym knockout.js, ale do tej pory było to całkiem proste, z wyjątkiem tego, że kiedy zaczynam dodawać trochę rzeczy do jQuery, problemem, który mam, jest to, że jQuery strzela przed zakończeniem nokautu. ze wszystkimi żywiołami.

Jedynym rozwiązaniem, które zadziałało dotychczas, jest to, że wszystkie moje rzeczy jQuery są zawijane w funkcję setTimeout(), co oczywiście nie jest dobre.

Jaki jest najskuteczniejszy sposób, aby jQuery i Knockout działały razem, więc jQuery nie robi tego przed nokautem?

Answer 1

Może window.load zamiast document.ready rade

Answer 2

Niedawno miałem ten sam problem z wtyczką jSignature i moim zdaniem Knockout. Przed wywołaniem jSignature potrzebowałem widoku KO do pełnego renderowania, w przeciwnym razie nie zmienił się prawidłowo.

Naprawiłem to za pomocą szablonu powiązania i funkcji wywołania zwrotnego afterRender, aby wywołać pracę jQuery.

Oto docs KO:

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

Oto krótki jsfiddle pokazując, jak można go używać:

http://jsfiddle.net/PCbFZ/

Sztuką jest to, że można użyć zwrotnego afterRender z następujących powiązanie szablonu bez faktycznego używania samego szablonu. Zamiast tego, owinąć całą istniejącą HTML w div że wywoła zwrotnego afterRender:

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

initApp jest funkcją, która działa jQuery.

Sądzę, że generalnie powinien zrobić to, czego potrzebujesz, ale jeśli Twój HTML jest szczególnie skomplikowany lub masz wiele widoków, które musisz renderować wewnątrz jednej strony, możesz potrzebować trochę więcej pracy. Daj mi znać, jak sobie radzisz - może spróbuję nieco pomóc, jeśli to nie rozwiązuje problemu tak łatwo, jak to zrobiłem!

---

Update - po komentarzu od Jacl poniżej - tutaj jest rozszerzoną wersją skrzypcach pokazując tę ​​technikę współpracuje również z ko-if. Za każdym razem, gdy pokazujesz/ukrywasz "widżet" za pomocą pola wyboru, stosuje się inny losowy kolor, aby wskazać funkcję afterRender wykonującą swoją pracę.

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

Answer 3

Można użyć: $(window).load(function(){ /* code */ }); zamiast $(document).ready();