使用Knockout-Kendo.js库刷新KendoDropDown

时间:2012-08-21 09:29:39

标签: javascript knockout.js kendo-ui

我正在使用Ryan Niemeyer的Knockout-Kendo.js库。我有一个像这样定义的kendodropdown:

<input id="availableLanguagesDropdown" data-bind="kendoDropDownList: { data: Languages, value:Language }" onchange="onAvailableLanguageChangeHandler();" />

其中Languages是可观察数组,Language是可观察数组。在我的应用程序中,项目从Languages数组(kendodropdown的数据源)中删除。当数组中没有语言时,kendodropdown显示最后一种语言。

我正在为这样的语言分配空值:

omega.Language("");

但是下拉列表中仍然可以看到最后一种语言。我想我应该刷新kendodropdown。在kendoUI的文档中,它是这样完成的:

var dropdownlist = $("dropdownlist").data("kendoDropDownList");
// re-render the items in drop-down list.
dropdownlist.refresh();

但是当我使用Knockout-Kendo.js库时,我不知道怎么能这样做。有人可以告诉我如何在没有项目的情况下刷新下拉菜单吗?这会帮助我在没有物品的情况下显示空的下拉菜单吗?感谢您的时间!

1 个答案:

答案 0 :(得分:1)

如果传递widget参数,绑定将在observable中为您提供窗口小部件。看起来简单地调用refresh()并不能解决问题。我不得不使用text方法将其视为空。

类似的东西:

<input id="availableLanguagesDropdown" data-bind="kendoDropDownList: { data: Languages, value:Language, widget: dropDown }" />

使用JS:

var ViewModel = function() {
    this.Languages = ko.observableArray(["one", "two", "three"]);
    this.Language = ko.observable("two");

    this.dropDown = ko.observable();

    this.removeLanguages = function() {
        this.Languages([]);
        this.Language("");
        this.dropDown().text("");
    };
};

此处示例:http://jsfiddle.net/rniemeyer/GQqwY/

似乎我应该尝试在库中解决这个问题。我一直希望能够访问小部件并调用它的方法只能用于高级或最后的使用。