ノックアウトで部分ビューでkendoDatePickerを実行する

Question

私はノックアウトで要素とデータをバインドしています。次に、ボタンをクリックするとレンダリングされる部分的なビューがあります。これまでのところすべてがうまくいきました。私は部分的に必要な正しいデータを取得します。 問題は、私はkendoDatePickerのように動作させたいと思っていますが、それはありません。私は、部分的なビューをレンダリングするためにボタンをクリックすると、適切なメソッドを実行し、正しいデータを取得するが、同じメソッドで行うことに気づいた $("#id").kendoDatePicker(); DOMエレメントはまだレンダリングされていない。私はノックアウトバインドしようとしました：<input data-bind="kendoDatePicker: {value: startDate}"/>のような要素をバインドしますが、それでも日付はありません。 パーシャルビューのメインディビジョンは、この「<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」バインダーを削除すると、このパリティ内のすべての要素が表示されますが、ボタンの機能は失われます。

誰でも同じ問題がありますか？それを動作させるために私は何か/変更していますか？

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