javascript - 当 Knockout View 模型更新时，Kendo UI 下拉菜单未更新

Question

我有一个 Kendo UI 下拉列表，当它绑定(bind)到的 Knockout View 模型发生更改时，它不会更新其 UI。我可以获得一个纯 HTML 选择和一个纯文本框来显示新模型值，但不能获得 Kendo UI。我忽略了什么？

这是一个代码示例(和 JSFiddle )。 FruitId 最初应为“2”(橙色)，单击按钮后应为“3”(香蕉)。文本框和两个下拉列表在 Knockout View 模型 (fruitId) 中绑定(bind)到相同的值。

随着手动更改 Kendo UI 下拉列表，Knockout View 模型也会更新，并且普通下拉列表和文本框会显示新值。但是，当单击按钮并在代码中更新 View 模型时，文本框和普通下拉列表会显示正确的值，但 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));
});

Answer 1

您应该使用 Ryan Niemeyer 的 Knockout KendoUI 绑定(bind) http://rniemeyer.github.com/knockout-kendo/web/DropDownList.html .