当Knockout视图模型更新时，Kendo UI下拉未更新

当Knockout视图模型发生更改时，我有Kendo UI下拉不更新其UI。我可以得到一个普通的HTML选择和纯文本框来显示新的模型值，但不是Kendo UI。我忽略了什么？当Knockout视图模型更新时，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)); 
});

来源

2013-02-01 Joe Wilson