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

Posted 2023-05-07

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

【英文标题】：How do I bind a DropDownList to a DataSource within an editor template using the scheduler?

【发布时间】：2014-02-16 20:21:08

【问题描述】：

我正在尝试自定义我对 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 获得。目标只是以最直接的方式绑定下拉列表。谢谢！

【参考方案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 属性。

【讨论】：

那记录在哪里？谢谢！

我也很惊讶它的工作。非常感谢，但是有没有记录育儿功能的参考资料？

【参考方案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>

【讨论】：

需要有趣的嵌套脚本块。我仍然不确定这是执行此操作的“正确”方法，而不是仅将静态数据传递给模板以进行渲染，该模板是从模板外部填充的。我猜这就是我应该做的，在这种情况下，如果我可以在调度程序显示编辑器窗口之前挂钩任何事件（因为数据将取决于所选的日期时间），那将是一件好事。

【参考方案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 事件中重新定义数据源选项，该事件在显示弹出编辑器窗口之前被调用。我没有使用过这种方案，但我不明白为什么它不起作用。

【讨论】：

谢谢，这种方法只有在我使用 MVVM 和 viewModel 时才有效吗？我无法让它在我的代码中工作，但是一旦我选择包含视图模型，我就设法让这个 jsFiddle 工作：jsfiddle.net/vNSX4

好吧，我使用的是所描述的方法，没有 MVVM 和 viewModel，而且效果很好。我会看看我是否能抽出时间来提琴（但 ajax 请求让这有点棘手）。或者，如果您有兴趣，我可以按原样提供代码（它不会工作），这样您就可以看到它是如何设置的。