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>

我的ViewModel：

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

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

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

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

我的问题是，如何在第一个请求中获取span的数据绑定，以便它从数据源返回的列表中显示当前所选的appointmentType的持续时间？我是否尝试将其绑定到下拉列表中的选定数据项？我应该用它做回调吗？如果重要，模板就在kendoScheduler中：

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

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

谢谢！

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

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

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

2 个答案: