在带有敲除的局部视图中的元素上执行 kendoDatePicker

Question

所以我正在致力于通过敲除将数据与元素绑定。然后有一个局部视图，当我单击一个按钮时呈现。到目前为止一切正常，我得到了部分所需的正确数据。问题是我有一个输入，我想像 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> 当我删除 "with" 活页夹时，我看到了这个局部视图中的所有元素，但我失去了按钮的功能。

有人遇到同样的问题吗？有什么我 do/change 可以让它工作的吗？

Answer 1

您是对的，DOM 中没有元素是问题所在。请注意，knockout 负责处理 DOM 更改，因此尝试获取元素并在 knockout 之外对它们进行处理不是一个好习惯。

而是使用 knockout custom bindings。它们允许您创建一个自定义绑定，该绑定对 DOM 元素进行操作，以了解 knockout 及其处理方式。因此：

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'}" />

在带有敲除的局部视图中的元素上执行 kendoDatePicker

executing kendoDatePicker on element in a partial view with knockout

asp.net-mvc

partial-views

knockout.js

kendo-datetimepicker

kendo-datepicker