當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