在 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

在调度程序的 edit 事件中，我可以访问正在编辑的模型。所以我尝试了以下方法：

我将调度程序配置为创建一个新的 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 实例中，我可以对模型中的更改做出反应。希望这对某人有帮助。网格上的弹出式编辑器也应该相同。

在 kendo 弹出编辑器上执行 javascript

Execute javascript on kendo popup editor

javascript

kendo-ui

kendo-grid

kendo-scheduler