javascript - 使用 Knockout-Kendo.js 库刷新 KendoDropDown

Question

我正在使用 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 库时，我不确定如何做到这一点。有人可以告诉我当下拉列表中没有项目时如何刷新下拉列表吗？当其中没有项目时，这会帮助我显示空下拉列表吗？感谢您的时间!

Answer 1

如果您传递 widget 参数，绑定(bind)将以可观察的方式向您提供小部件。看起来简单地调用 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/

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