Knockout 视图模型更新时未更新 Kendo UI 下拉菜单答案

【问题标题】：Kendo UI drop down not updated when Knockout view model updatesKnockout 视图模型更新时未更新 Kendo UI 下拉菜单
【发布时间】：2013-01-16 08:21:31
【问题描述】：

我有一个 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));
});

【问题讨论】：

标签： javascript knockout.js telerik kendo-ui

【解决方案1】：

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

【讨论】：

我知道这个库，但我想把它作为最后的手段。有没有简单的方法可以在 KO 模型更改时更新 Kendo UI 下拉菜单的 UI 以显示正确的值？
不，淘汰赛只是操纵 DOM。 KendoUI 库（与任何其他 UI 组件一样）侦听各种 DOM 事件以获取用户输入，但它无法检测 DOM 更改，除非定期检查这是完全没有必要的。

【解决方案2】：

我现在最终使用了 Knockout 订阅，而不是 Knockout-Kendo 库。我在订阅功能内的 UI 中设置下拉值。

我还必须更改上面的代码以将 ViewModel 的相同实例保留在内存中。每次单击按钮时获取一个新的 ViewModel() 意味着更改/订阅代码不会触发。

【讨论】：