Выполнение kendoDatePicker на элементе в частичном представлении с нокаутом

Question

Итак, я работаю над привязкой данных к элементам с помощью нокаута. Затем a имеет частичный вид, который отображается, когда я нажимаю кнопку. Пока все работает нормально, я получаю нужные данные, которые мне нужны для частичного. Проблема в том, что у меня есть вход, который я хочу вести как kendoDatePicker, но он не будет. Я заметил, что когда я нажимаю кнопку, чтобы отобразить частичный вид, он выполняет правильный метод и получает нужные данные, но в том же методе $("#id").kendoDatePicker(); Но элемент DOM еще не отображен, и я думаю, что это проблема , Я попытался выполнить нокаут-привязать элемент как: <input data-bind="kendoDatePicker: {value: startDate}"/>, но тогда даже дата не указана. Обратите внимание, что главный div в частичном представлении привязан как этот <div data-bind="with: $root.shift"> <input id="randomId" data-bind: Start"/> //thats not showing in the main DOM until I the partial is loaded</div>, когда я удаляю связывание «со», я вижу весь элемент внутри этого паролита, но я теряю функциональность кнопки.

У кого-то такая же проблема? Есть ли что-нибудь, что я делаю/меняю, чтобы заставить его работать?

Answer 1

Вы правы, что проблема с отсутствием элемента в DOM. Обратите внимание, что нокаут отвечает за обработку изменений DOM, поэтому попытка захватить элементы и сделать что-то с ними вне нокаута не является хорошей практикой.

Вместо этого используйте knockout custom bindings. Они позволяют создавать пользовательскую привязку, которая работает с элементами DOM в отношении нокаута и как он обрабатывает их. Поэтому:

ko.bindingHandlers.kendoDatePicker = { 
 
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
 
     //here you can access (and possibly pass it to the options) the 'value' by callnig valueAccessor(). 
 
     $(element).kendoDatePicker(); 
 
    } 
 
}; 
 

 
ko.applyBindings({});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script> 
 
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" /> 
 

 
<input id="datepicker" value="10/10/2011" style="width: 100%" data-bind="kendoDatePicker: {value: 'somevalue'}" />