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

Question

我有一个 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>

我的视图模型：

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

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

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

模板在一个窗口中，第一次加载时 span 是空的，然后再工作（一旦从第一个请求加载数据）。

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

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

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

谢谢！

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

Answer 1

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

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

和你的视图模型：

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

Answer 2

您需要设置 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>

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