Документ jQuery готов с помощью Knockout.js

Я только что попал в CMS Umbraco ASP.NET для моего последнего проекта, я не уверен, что так оно и есть, но для моей установки Knockout.js делает все шаблоны.

Я не слишком увлечен knockout.js, но до сих пор это было довольно просто, за исключением того, что когда я начинаю добавлять некоторые вещи jQuery, проблема, с которой я столкнулась, - это jQuery, когда он заканчивает заполнение страницы все элементы.

Единственное решение, которое работало для меня до сих пор, - все мои вещи jQuery завернуты в функцию setTimeout(), что, очевидно, не является хорошим.

Какой самый эффективный способ заставить jQuery и Knockout работать вместе, чтобы jQuery не выполнялся до нокаута?

Ответы

Ответ 1

Недавно у меня была такая же проблема с плагином jSignature и моим представлением "Нокаут". Мне нужно, чтобы KO-представление полностью отображалось до того, как я вызвал jSignature, в противном случае он не сделал бы правильный размер.

Я исправил его привязкой шаблона и функцией обратного вызова afterRender, чтобы вызвать работу jQuery.

Здесь KO docs:

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

Вот быстрый jsfiddle, показывающий, как вы можете его использовать:

http://jsfiddle.net/PCbFZ/

Фокус в том, что вы можете использовать обратный вызов afterRender привязки шаблона, фактически не используя сам шаблон. Вместо этого вы переносите весь существующий HTML в div, который будет вызывать обратный вызов afterRender:

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

initApp - это функция, выполняющая работу jQuery.

Я думаю, что, как правило, нужно делать то, что вам нужно, хотя, если ваш HTML особенно сложный или у вас много просмотров, которые нужно отображать на одной странице, вам может потребоваться немного больше работы. Дайте мне знать, как вы справитесь - может быть, я попытаюсь помочь немного больше, если это не совсем исправляет вашу проблему так же легко, как и моя!

Обновление - после комментария JACL ниже - здесь расширенная версия скрипта, показывающая этот метод, также работающий с ko-if. Каждый раз, когда вы показываете/скрываете "виджет", используя этот флажок, применяется другой случайный цвет, чтобы указать, что функция afterRender выполняет свою работу.

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

Ответ 2

Возможно, window.load вместо document.ready сделает трюк

Ответ 3

Вы можете использовать: $(window).load(function(){ /* code */ }); вместо $(document).ready();