javascript 将 Kendo UI 下拉列表绑定到由数据源填充的 ViewModel 的最佳方法是什么？

What is best way to bind a Kendo UI dropdownlist to a ViewModel that is populated by a datasource?

提问by ssmith

I have a kendoUI dropdownlist that is in a template and is bound to a ViewModel, along with a span that is bound to the data item that is selected in the dropdownlist:

我有一个位于模板中的 kendoUI 下拉列表并绑定到一个 ViewModel，以及一个绑定到下拉列表中选择的数据项的跨度：

<p>
    <label>Appointment Type: </label>
    <select id="appointmentTypeDropDownList"
            data-text-field="Name"
            data-value-field="AppointmentTypeId"
            data-role="dropdownlist"
            data-bind="source:appointmentTypes, value:AppointmentTypeId"
            data-autobind="true"
            data-select="onSelected" />
</p>
<p><label>Duration:</label>
    <span data-bind="text:selectedAppointment.Duration"></span> minutes
</p>

My ViewModel:

我的视图模型：

var viewModel = new kendo.observable({
    appointmentTypes: appointmentTypesDataSource,
    selectedAppointment : null,
});

Originally, I was using a hardcoded array of appointmentTypes, and setting the selectedAppointment to appointmentTypes[0] in the above viewModel declaration. That doesn't work now, because the datasource loads asynchronously. The viewModel is updated in the onSelected function:

最初，我使用了一个硬编码的约会类型数组，并在上面的 viewModel 声明中将 selectedAppointment 设置为约会类型 [0]。现在这行不通，因为数据源是异步加载的。viewModel 在 onSelected 函数中更新：

var onSelected = function (e) {
    var dataItem = this.dataItem(e.item.index());
    viewModel.set("selectedAppointment", dataItem);
};

The template is in a window, and the span is empty the first time it loads, and then works thereafter (once the data has loaded from the first request).

模板在一个窗口中，第一次加载时跨度为空，然后工作（从第一个请求加载数据后）。

My question is, how can I get the data binding of the span to work on the first request, so that it will display the Duration of the currently selected appointmentType from the list that is returned by the data source? Do I try and bind it to the selected data item of the dropdownlist? Is there a callback somewhere I should be using to do this? The template is inside of a kendoScheduler, if that matters:

我的问题是，如何让 span 的数据绑定在第一个请求上工作，以便从数据源返回的列表中显示当前选定的约会类型的持续时间？我是否尝试将其绑定到下拉列表的选定数据项？我应该在某处使用回调来执行此操作吗？该模板位于 kendoScheduler 内，如果这很重要：

var template = kendo.template($("#editor").html());

$("#scheduler").kendoScheduler({
    editable: {
        template: template()
    }
});

Thanks!

谢谢！

Update: The template I've been working with is an editor for a Kendo UI Scheduler, which was not bound to its viewmodel, but was using part of the viewmodel for its datasource. In this case, trying to use the data-bind="events:{...}" syntax was causing the weird type errors I was getting. To wire up the databound event, Atanas let me know to use data-bound="onDataBound" and a global handler function (or alternately to configure my scheduler declaratively and bind it to the viewmodel). Using data-bound combined with the answer(s) below worked for me.

更新：我一直在使用的模板是 Kendo UI 调度程序的编辑器，它没有绑定到它的视图模型，而是将视图模型的一部分用于其数据源。在这种情况下，尝试使用 data-bind="events:{...}" 语法会导致我遇到奇怪的类型错误。为了连接数据绑定事件，Atanas 让我知道使用 data-bound="onDataBound" 和全局处理函数（或者交替地以声明方式配置我的调度程序并将其绑定到视图模型）。使用数据绑定结合下面的答案对我有用。

回答by Lars H?ppner

You could use the dataBoundevent on the dropdown and set selectedAppointmentfrom there:

您可以dataBound在下拉列表中使用该事件并selectedAppointment从那里设置：

data-bind="source:appointmentTypes, value:AppointmentTypeId, events: { dataBound: onDataBound }"

and your view model:

和您的视图模型：

var viewModel = new kendo.observable({
    appointmentTypes: appointmentTypesDataSource,
    selectedAppointment : null,
    onDataBound: function(e) {
        e.sender.select(0); // will trigger your change handler
    }
});

回答by Atanas Korchev

You need to set the initial value of the selectedAppointment. This is the only way the span text will be set before the data source has been populated. Here is a runnable demo based on Northwind's Products:

您需要设置 selectedAppointment 的初始值。这是在填充数据源之前设置跨度文本的唯一方法。这是一个基于 Northwind 产品的可运行演示：

<span data-bind="text:selectedProduct.ProductName"></span>
<select data-bind="source: products, value: selectedProduct"
      data-text-field="ProductName"
      data-value-field="ProductID"
      data-role="dropdownlist"></select>
<script>
var o = kendo.observable({
  selectedProduct: {
    ProductID: 2,
    ProductName: "Chang"
  },
  products: new kendo.data.DataSource({
    transport: {
      read: {
        url: "http://demos.telerik.com/kendo-ui/service/products",
        dataType: "jsonp"
      }
    }
  })
});

kendo.bind(document.body, o);
</script>

Here is a live demo: http://jsbin.com/pawiz/1/edit

这是一个现场演示：http: //jsbin.com/pawiz/1/edit