在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

回答

相关问题