knockout (привязка шаблона): функции javascript(JQuery) не вызываются из шаблона

Question

У меня есть главная страница, на которой указаны все сценарии, и внутри тела у меня есть контейнер duv, в котором есть привязка данных шаблона, и мои htm там привязаны.

Проблема заключается в моей функциональности, которая контролируется Jquery не работает должным образом. Например, средство выбора даты работает, когда я помещаю его на главную страницу, на которую ссылается JavaScript, но не работает внутри моего htm, который привязывается к шаблону.

Все библиотеки загружаются правильно, но моя функциональность jquery не работает, когда ее вызывают внутри шаблона.

например, главная страница:

<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/jquery.qtip.js"></script>
<script src="Scripts/foundation.min.js"></script>
<script src="Scripts/jquery.tablesorter.js"></script>
<script src="Scripts/jquery-ui.js"></script>
<script src="Scripts/languageswitcher.js"></script>

<div id="Container" ua-app-id="topVm" data-bind='template: {name: pageModel, data: pageVM }'>                   
</div>
<!-- Initialize JS Plugins -->
<script src="Scripts/app.js"></script>

---

Теперь мой вид загружается на главной странице во время выполнения. На мой взгляд, у меня есть выбор даты, это не работает. Когда я выкладываю это на главной странице, это работает нормально.

Answer 1

Я думаю, что это потому, что ваш код JQuery выполняется до того, как ваш шаблон отображается. Вы можете использовать обратный вызов afterRender, предоставленный в привязке шаблона, чтобы включить возможность выбора даты. Посмотрите на документацию для получения дополнительной информации и примеров.

Но еще лучший способ сделать это - создать собственную привязку. Что-то вроде этого:

ko.bindingHandlers.datepicker = {
    init: function(element){
        $(element).datepicker();
    },
    update: function(element) {
        $(element).datepicker('refresh');
    }
};

Затем вы можете сделать ввод текста в DatePicker, выполнив это:

<input type="text" data-bind="datepicker:true" />

Подробнее о пользовательских привязках читайте здесь