我有一个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)。使用数据绑定和下面的答案为我工作。
答案 0 :(得分:4)
您可以在下拉列表中使用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
}
});
答案 1 :(得分:1)
您需要设置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