在kendo彈出編輯器上執行javascript

我彈出了我的網格和調度程序的編輯器。編輯器使用kendo-template（MVVM）定義。我想在打開這些編輯器時執行一些JavaScript，並且可以訪問當前正在編輯的模型。我知道執行JS的技巧，但不知道如何訪問模型。在kendo彈出編輯器上執行javascript

<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>

什麼是完成這一任務的最簡單的方法？

來源

2015-11-04 sheamus

你能爲我們提供一個你的場景的演示嗎？ – DontVoteMeDown

基本上，我想以MVVM綁定無法處理的方式對模型中的更改作出反應。例如，如果開始日期更改爲Fridway，而之前是星期一，則顯示文本'no Friday on fridays！'。 – sheamus

在調度器的編輯事件中，我可以訪問正在編輯的模型。所以，我試過如下：

我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 = TRUE，因爲這對我來說是一個問題。

調用initDropdowns（）從構造函數未初始化的下拉菜單改正值，所以從模板調用它：

</div> 
</div> 
<script> 

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

現在在我的ScheduleEditor比如我可以在模型中的變化作出反應。希望這可以幫助某人。它也應該與網格上的彈出式編輯器相同。

來源

2015-11-04 15:34:50 sheamus

在kendo彈出編輯器上執行javascript

回答

相關問題