在剑道弹出编辑器上执行 javascript答案

【问题标题】：Execute javascript on kendo popup editor在剑道弹出编辑器上执行 javascript
【发布时间】：2015-11-04 07:20:40
【问题描述】：

我的网格和调度程序有弹出编辑器。编辑器使用剑道模板 (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>

最简单的方法是什么？

【问题讨论】：

您能为我们提供您的场景的工作演示吗？
基本上我想以 MVVM 绑定无法处理的方式对模型中的更改做出反应。例如，如果开始日期更改为星期五，而之前是星期一，则显示文本“星期五没有工作！”。

标签： javascript kendo-ui kendo-grid kendo-scheduler

【解决方案1】：

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

我配置了 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 实例中，我可以对模型中的更改做出反应。希望这可以帮助某人。网格上的弹出编辑器也应该是一样的。

【讨论】：