Javascript 将Kendo UI dropdownlist绑定到由数据源填充的ViewModel的最佳方法是什么？

我有一个模板中的kendoUI dropdownlist，它绑定到ViewModel，还有一个范围，它绑定到dropdownlist中选定的数据项：

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

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

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

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

我的问题是，如何获得span的数据绑定来处理第一个请求，以便它显示数据源返回的列表中当前选定的appointmentType的持续时间？我是否尝试将其绑定到dropdownlist的选定数据项？是否有一个回调的地方，我应该用来做这件事？该模板位于kendoScheduler中，如果这很重要：

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

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

谢谢

更新：我使用的模板是Kendo UI调度程序的编辑器，该调度程序未绑定到其viewmodel，但将viewmodel的一部分用作其数据源。在本例中，试图使用data bind=“events:{…}”语法导致了我遇到的奇怪类型错误。为了连接数据绑定事件，Atanas让我知道使用data bound=“onDataBound”和全局处理程序函数（或者以声明方式配置我的调度程序并将其绑定到viewmodel）。将数据绑定与下面的答案结合使用对我来说很有效。

您可以使用下拉列表中的事件，然后从中设置

selectedappoints

：

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
    }
});

---

您需要设置所选应用程序的初始值。这是在填充数据源之前设置跨度文本的唯一方法。以下是基于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>

var o=剑道。可观察({
所选产品：{
产品编号：2，
产品名称：“Chang”
},
产品：新的kendo.data.DataSource({
运输：{
阅读：{
url:“http://demos.telerik.com/kendo-ui/service/products",
数据类型：“jsonp”
}
}
})
});
剑道绑定（document.body，o）；

---

下面是一个实时演示：

试图使此功能正常工作，但出现错误“UncaughtTypeError:undefined不是函数”，这似乎发生在声明性初始化中。我在viewModel上使用onDataBound进行了尝试，如图所示，并将其作为一个全局变量；同样的效果。有什么想法吗？谢谢。还有，为什么我可以为选择事件使用数据选择，而不是为数据绑定事件使用数据数据绑定？这个JSFIDLE意味着数据绑定对于DropDownList小部件不可用：我设置了一个演示；您的JSFIDLE可能无法工作，因为它使用的是相当旧的剑道ui版本；你的问题是：如果你想将视图模型上的方法绑定到事件，你需要在数据绑定中进行绑定（如果你用数据选择设置它，它只会在全局范围内查找函数）@Julie我一直在和我的计算机争论“我的意图很明显！当然，你一定知道我的意思吧？”；但他总是嘲笑我，并对我提出异议和其他下流话。有时我想知道他是否真的把我当回事。拉尔斯举的这个例子怎么样？我无法在实际代码中使用它，因为我总是在我的事件{}绑定中遇到“UncaughtTypeError:UndefinedisnotaFunction”错误，但它显然在他的演示中起作用。我可以让它与您的代码一起工作，但这显然是一种黑客行为，因为我现在必须在客户端脚本中嵌入神奇的值，而不是依赖数据源中的实际数据。谢谢为什么这显然是一个黑客行为？在您的真实场景中，“价值”从何而来？它不是别的东西的财产吗？数据源本身不支持“选定值”，它只表示一个项目数组。链接示例总是在收到数据后选择第一个数据项。由于dropdownlist没有空的第一项（例如“选择项”），因此无论第一项是什么，都是默认项。根据相同的约定，无论dropdownlist的数据源中的第一项是什么，都应该是viewmodel中的默认selectedItem（在我的示例中，其Duration属性显示在绑定范围中）。在客户端代码中包含来自数据源的名称/ID是一种黑客行为，因为我将来可能会更改数据源，或者该数据的顺序可能会更改，并且除非我更新硬编码的值，否则我的代码将不正确。在您的示例中，如果有人添加了一个列在“change”之前的新产品，我们可以说“Asparagus”。现在，跨度将改为“Chang”，但下拉列表中的第一项将改为“芦笋”，对吗？不。两者将保持不变-Chang。除非新项目具有与Chang相同的ProductID。无论如何，如果你不想设置初始值，你就必须像Lars那样做。以某种方式触发dropdownlist的更改：SelectedAppoints的期望初始值是多少？如何从数据源确定它？显然，您不希望它为空。它应该与dropdownlist中的第一项匹配，因为如果用户只保存表单，dropdownlist中的第一项将是selectedvalue。

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