如何使用调度程序将DropDownList绑定到编辑器模板中的数据源? [英] How do I bind a DropDownList to a DataSource within an editor template using the scheduler?

问题描述

我正在尝试自定义对Kendo UI kendoScheduler小部件的使用.我正在为可编辑窗口指定自定义模板，当您在计划程序中添加/编辑约会时会弹出该模板，如下所示:

editable: {
                template: $("#editor").html()
            },

我正在这样定义模板:

<script id="editor" type="text/x-kendo-template">
<h3>Edit Appointment</h3>
   <p>
       <label>Patient: <input name="title" /></label>
   </p>
   <p>
       <label>Start: <input data-role="datetimepicker" name="start" /></label>
   </p>
</script>

所以现在我想添加一个Kendo UI DropDownList并将其配置为从远程数据源填充.您如何在模板中配置这些内容?

示例代码(无效):

<p>
    <label>Type: </label><input id="appointmentTypeDropDownList" />
</p>
# var dataSource = new kendo.data.DataSource({ transport: { read: { url: "http://demos.kendoui.com/service/products", dataType: "jsonp" } } });
# $("#appointmentTypeDropDownList").kendoDropDownList({ dataSource: dataSource, dataTextField: "ProductName", dataValueField: "ProductID" } ) ;

上面的代码给出的错误是: 未捕获的错误:模板无效:'

可能这只是脚本编码问题；我对将绑定的DropDownList放置在模板中的正确方法更感兴趣.

更新-可在以下 jsfiddle URL 中找到我正在尝试做的最新简化版本. >.目标只是以尽可能简单的方式绑定下拉列表.谢谢！

解决方案

如果将调度程序数据源移动到viewModel中，则可以使用Kendo Observable的育儿功能将DropDownList绑定到正确的数据源.

var viewModel = new kendo.observable({
    appointmentTypes : new kendo.data.DataSource({
        data: [{
            id: 1,
            text: "Wellness Exam"
        }, {
            id: 2,
            text: "Diagnostic Exam"
        }, {
            id: 3,
            text: "Nail Trim"
        }]
    }),
    schedulerData: [{
        id: 1,
        start: new Date("2014/1/27 08:00 AM"),
        end: new Date("2014/1/27 09:00 AM"),
        title: "Breakfast"
    }]
});

现在，当您创建调度程序时，只需使用视图模型上的schedulerData属性作为调度程序的数据源即可.

$("#scheduler").kendoScheduler({
    ...
    dataSource: viewModel.schedulerData,
    ...
});

最后一步只是更改您的DropDownList声明以在视图模型上使用appointmentTypes属性.

<select id="appointmentTypeDropDownList" data-bind="source:appointmentTypes, value:id" data-text-field="text" data-value-field="id" data-role="dropdownlist" data-autobind="true" />

由于模板将与schedulerData数据源中的Observable对象绑定，因此Kendo将爬升该对象的父树，直到它能够解析viewModel上的appointmentTypes属性.

I'm trying to customize my use of the Kendo UI kendoScheduler widget. I'm specifying a custom template for the editable window that pops up when you go to add/edit an appointment in the scheduler, like so:

editable: {
                template: $("#editor").html()
            },

I'm defining the template like this:

<script id="editor" type="text/x-kendo-template">
<h3>Edit Appointment</h3>
   <p>
       <label>Patient: <input name="title" /></label>
   </p>
   <p>
       <label>Start: <input data-role="datetimepicker" name="start" /></label>
   </p>
</script>

So now I want to add a Kendo UI DropDownList and configure it to populate from a remote datasource. How do you configure such things within a template?

Sample code (does not work):

<p>
    <label>Type: </label><input id="appointmentTypeDropDownList" />
</p>
# var dataSource = new kendo.data.DataSource({ transport: { read: { url: "http://demos.kendoui.com/service/products", dataType: "jsonp" } } });
# $("#appointmentTypeDropDownList").kendoDropDownList({ dataSource: dataSource, dataTextField: "ProductName", dataValueField: "ProductID" } ) ;

The error it gives with the above code is: Uncaught Error: Invalid template:'

Probably this is just a script encoding issue; I'm more interested in the proper way to place a bound DropDownList inside of a template.

Update - The latest simplified version of what I'm trying to do is available at this jsfiddle URL. The goal is simply to bind the dropdown list in the most straightforward way possible. Thanks!

解决方案

If you move your scheduler DataSource into your viewModel you can use the parenting functionality of a kendo Observable to have the DropDownList bind against the correct DataSource.

var viewModel = new kendo.observable({
    appointmentTypes : new kendo.data.DataSource({
        data: [{
            id: 1,
            text: "Wellness Exam"
        }, {
            id: 2,
            text: "Diagnostic Exam"
        }, {
            id: 3,
            text: "Nail Trim"
        }]
    }),
    schedulerData: [{
        id: 1,
        start: new Date("2014/1/27 08:00 AM"),
        end: new Date("2014/1/27 09:00 AM"),
        title: "Breakfast"
    }]
});

Now when you create the scheduler you just have it use the schedulerData property on the view model, as the DataSource for the scheduler.

$("#scheduler").kendoScheduler({
    ...
    dataSource: viewModel.schedulerData,
    ...
});

The last piece is just changing your DropDownList declaration to use the appointmentTypes property on your view model.

<select id="appointmentTypeDropDownList" data-bind="source:appointmentTypes, value:id" data-text-field="text" data-value-field="id" data-role="dropdownlist" data-autobind="true" />

Since your template will be bound against the Observable objects in the schedulerData DataSource, Kendo will climb the parent tree of the object until it's able to resolve the appointmentTypes property that's on viewModel.

这篇关于如何使用调度程序将DropDownList绑定到编辑器模板中的数据源?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！