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

时间:2014-02-13 03:29:14

标签: javascript kendo-ui kendo-mvvm kendo-datasource

我有一个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)。使用数据绑定和下面的答案为我工作。

2 个答案:

答案 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