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

标签 javascript knockout.js telerik kendo-ui

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

最佳答案

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

关于javascript - 当 Knockout View 模型更新时,Kendo UI 下拉菜单未更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14639232/

相关文章:

html - 与用新类覆盖现有 CSS 类相关的问题

javascript - 我如何设置 Angular JS 服务

javascript - 手动订阅调用updateFromJS导致死锁

javascript - Telerik RadTreeView 和客户端展开/折叠

javascript - 访问 View 模型中的对象 Knockout

javascript - 从 Knockout.js 的下拉列表中获取选定的值

winforms - 如何在Telerik WinForms中切换主题?

javascript - 如何在悬停时显示每个元素的值

javascript - 在苹果 iPhone 上,点击通知会捕获什么事件?

javascript - 获取与 jQuery 中的选择器匹配的下一个元素