Выполнить javascript для редактора всплывающих окон kendo

Question

У меня есть всплывающие редакторы для моих сеток и планировщика. Редакторы определяются с помощью кендо-шаблона (MVVM). Я хотел бы выполнить некоторый javascript, когда эти редакторы будут открыты, с доступом к редактируемой модели. Я знаю трюк для выполнения JS, но не как получить доступ к модели.

<script id="my-editor" type="text/x-kendo-template" title="Edit Event"> 
    <div class="k-edit-form-container"> 
     <input type="hidden" data-bind="value: taskId" /> 

     <div class="k-edit-label"> 
      <label for="title">Title</label> 
     </div> 
     <div data-container-for="title" class="k-edit-field"> 
      <input type="text" class="k-input k-textbox" name="title" data-bind="value:title"> 
     </div> 

     <div class="k-edit-label"> 
      <label for="start">Start Date</label> 
     </div> 
     <div data-container-for="start" class="k-edit-field"> 
      <input id="eventStartInput" type="text" data-role="datepicker" name="start" data-bind="value:start"> 
     </div> 

     <div class="k-edit-label"> 
      <label for="currentHatId">Hat</label> 
     </div> 
     <div id="hatContainer" data-container-for="currentHatId" class="k-edit-field" disabled> 
     </div> 

    <script> 

     jQuery(function(){ 


      jQuery('<select data-bind="value: currentHatId" name="currentHatId"/>') 
       .appendTo(jQuery('#hatContainer')) 
       .kendoDropDownList({ 
        dataTextField: 'Name', 
        dataValueField: 'HatId', 
        optionLabel: '-- choose hat --', 
        dataSource: { type: 'odata-v4', transport: { read: { url: 'odata/Hats' } } } 
       }); 

      //I want access to the 'bound' model here! 
     }) 
    <\/script> 
</script> 

Что является самым простым способом добиться этого?

Answer 1

В Редактировать событие планировщика, у меня есть доступ к редактируемой модели. Так что я попытался следующие:

Я configuered планировщик, чтобы создать новый экземпляр ScheduleEditor:

edit: (e: kendo.ui.SchedulerEditEvent) => { new ScheduleEditor(e); } 

Тогда мой ScheduleEditor выглядит следующим образом:

class ScheduleEditor 
{ 
    private _event: kendo.ui.SchedulerEditEvent; 

    constructor(e: kendo.ui.SchedulerEditEvent) 
    { 
     this._event = e; 
     e.event.bind('change', (x: any) => { this.eventChanged(x) }); 
    } 

    private eventChanged(x: any) 
    { 
     console.log('{0} changed', x.field); 
    } 

    public static initDropDowns(): void 
    { 
     jQuery('<select data-bind="value: currentHatId" name="currentHatId"/>') 
      .appendTo(jQuery('#hatContainer')) 
      .kendoDropDownList({ 
       dataTextField: 'Name', 
       dataValueField: 'HatId', 
       valuePrimitive: true, 
       optionLabel: '-- choose hat --', 
       dataSource: { type: 'odata-v4', transport: { read: { url: 'odata/Hats' } } } 
      }); 
    } 
} 

Обратите внимание на valuePrimitive = истинный, поскольку это было проблемой для меня.

Вызов initDropdowns() из конструктора не инициализировать падение падения исправить значение, так называют его из шаблона:

</div> 
</div> 
<script> 

    jQuery(function(){ 
     ScheduledRecipeEditor.initDropDowns(); 
    }) 
<\/script> 

Теперь в моем случае ScheduleEditor я могу реагировать на изменения в модели. Надеюсь, это поможет кому-то. Он должен быть таким же для всплывающего редактора на сетке.