在kendo弹出编辑器上执行javascript

Question

我有我的网格和调度程序的弹出编辑器。编辑器由一个kendo模板(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

在调度程序的编辑事件中，我可以访问正在编辑的模型。因此，我尝试了以下几点：

我将Scheduler配置为创建一个新的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实例中，我可以对模型中的更改做出反应。希望这能帮上忙。对于网格上的弹出编辑器来说也应该是一样的。