如何使用调度程序将 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 属性作为调度程序的数据源。

$("#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 属性。

Answer 2

模板引发错误，因为选择器“#appointmentTypeDropDownList”应该被转义，看起来像这样“\\#appointmentTypeDropDownList”（Kendo UI Documentation）。

修复此问题后，您不会收到模板错误，但仍不会将数据绑定到 KendoDropDownList。 我检查了在这种情况下 KendoUI MVC 助手将呈现的内容，似乎如果您的模板看起来像这样，它将起作用。

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

        <p>
            <label>Type: </label><input id="appointmentTypeDropDownList" />

                <script>
                    var dataSource = new kendo.data.DataSource({ transport: { read: { url: "http://demos.kendoui.com/service/products", dataType: "jsonp" } } }); 

                    jQuery(function() { jQuery("\\#appointmentTypeDropDownList").kendoDropDownList({ dataSource: dataSource, dataTextField: "ProductName", dataValueField: "ProductID" } ); });
                 <\/script>
        </p></script>

Answer 3

模板中不需要放任何javascript，可以使用Kendo的数据属性初始化功能。

所以，你的模板看起来像：

<label>Type: </label>
<input id="appointmentTypeDropDownList" data-text-field="ProductName" data-value-field="ProductID" data-bind="value:ProductID" data-source="dataSource" data-role="dropdownlist" data-autobind="true" />

那么你的模板之外会有 Javascript：

var dataSource = new kendo.data.DataSource({
  transport: { 
    read: { 
      url: "http://demos.kendoui.com/service/products", 
      dataType: "jsonp"
    }
  }
});

只要在全局范围内定义了dataSource，就可以开始使用。这里有更多关于数据属性初始化的信息http://docs.telerik.com/kendo-ui/getting-started/data-attribute-initialization

编辑：刚刚注意到您的评论“数据将取决于所选的日期时间”。您总是可以尝试在edit 事件中重新定义数据源选项，该事件在显示弹出编辑器窗口之前被调用。我没有使用过这种方案，但我不明白为什么它不起作用。