Question

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

Answer 1

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

Answer 2

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

我还必须更改上面的代码，以便在内存中保留ViewModel的相同实例。在每个按钮点击上获得一个新的ViewModel（）意味着更改/订阅代码没有触发。

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

2 个答案: