如何使用调度程序将DropDownList绑定到编辑器模板中的DataSource？

Question

我正在尝试自定义我对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提供了我正在尝试做的最新简化版本.目标只是以最直接的方式绑定下拉列表.谢谢!

Answer 1

如果将调度程序DataSource移动到您的中viewModel,则可以使用kendo Observable的父级功能使DropDownList绑定到正确的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"
    }]
});

现在,当您创建调度程序时,您只需使用schedulerData视图模型上的属性作为调度程序的DataSource.

$("#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" />

由于您的模板将绑定到schedulerDataDataSource 中的Observable对象,因此Kendo将爬上对象的父树,直到它能够解析打开的appointmentTypes属性viewModel.