Question

所以我正在努力通过淘汰赛将数据绑定到元素上。然后我有一个局部视图，当我点击一个按钮时呈现。到目前为止，一切都工作正常，我得到了部分需要的正确数据。问题是我有一个输入，我想像kendoDatePicker一样，但它不会。我注意到当我单击按钮渲染部分视图时，它会执行正确的方法并获取正确的数据，但它采用相同的方法 $("#id").kendoDatePicker();但DOM元素尚未呈现，我想这就是问题所在。我试图敲除绑定元素，如：<input data-bind="kendoDatePicker: {value: startDate}"/>，但后来甚至没有日期。请注意，当我删除＆＃34;和＃34;时，部分视图中的主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>。粘合剂，我看到这个parital里面的所有元素，但我失去了按钮的功能。

有人遇到同样的问题吗？有什么我做/改变使它工作？

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

使用knockout

1 个答案: