我有一个 Kendo UI 下拉菜单，当它绑定到的 Knockout 视图模型发生更改时，它不会更新其 UI。我可以获得一个纯 HTML 选择和一个纯文本框来显示新模型值，但不是 Kendo UI。我在看什么？
这是一个代码示例（和JSFiddle）。FruitId 最初应为“2”（橙色），然后在单击按钮后为“3”（香蕉）。文本框和两个下拉列表绑定到 Knockout 视图模型 (fruitId) 中的相同值。
由于手动更改了 Kendo UI 下拉列表，因此更新了 Knockout 视图模型，并且纯下拉列表和文本框显示了新值。但是当单击按钮并在代码中更新视图模型时，文本框和普通下拉列表显示正确的值，但 Kendo UI 下拉列表没有。
的HTML
<p>
<label for="kendoDropDown">Kendo UI Drop Down</label>
<input id="kendoDropDown" type="text" data-bind="value: fruitId" />
</p>
<p>
<label for="select">Plain old select</label>
<select id="select" data-bind="value: fruitId">
<option value="1">apple</option>
<option value="2">orange</option>
<option value="3">banana</option>
</select>
</p>
<p>
<label for="textBox">Plain old text box</label>
<input id="textBox" type="text" data-bind="value: fruitId" class="k-textbox" />
</p>
<p>
<button id="changeTo3" class="k-button">change fruitId to "3" (banana) programmatically</button>
</p>
<p>
<button id="changeTo2" class="k-button">change fruitId to "2" (orange) programmatically</button>
</p>
JavaScript
// Define the Knockout view model
var ViewModel = function (data) {
var self = this;
self.fruitId = ko.observable(data.fruitId);
}
// Init the drop down
var kendoDropDownData = [
{ id: "1", name: "apple"},
{ id: "2", name: "orange" },
{ id: "3", name: "banana" }
];
$("#kendoDropDown").kendoDropDownList({
dataValueField: "id",
dataTextField: "name",
dataSource: kendoDropDownData
});
// Wire up KO bindidng
var initialData = { fruitId: "2" };
ko.applyBindings(new ViewModel(initialData));
// Wire up the buttons
$("#changeTo3").click(function () {
var newData = { fruitId: "3" };
ko.applyBindings(new ViewModel(newData));
});
$("#changeTo2").click(function () {
var newData = { fruitId: "2" };
ko.applyBindings(new ViewModel(newData));
});