kendo-ui - 如何使用调度程序将 DropDownList 绑定(bind)到编辑器模板中的数据源？

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" } ) ;

上面代码给出的错误是: Uncaught Error :模板无效:'

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

更新 - 我正在尝试做的最新简化版本可在这个 jsfiddle URL 获得.目标只是以最直接的方式绑定(bind)下拉列表。谢谢!

Answer 1

如果将调度程序数据源移动到 viewModel 中，则可以使用 kendo Observable 的父级功能让 DropDownList 绑定(bind)到正确的数据源。

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"
    }]
});

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

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

最后一部分只是更改您的 DropDownList 声明以使用 View 模型上的 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 对象绑定(bind)，Kendo 将爬升对象的父树，直到它能够解析 appointmentTypes 属性在 viewModel 上。