javascript - Knockout.js延迟值更新: afterkeydown

Question

我有一个搜索栏，它使用 afterkeydown 将数据绑定(bind)到网格中。然而，绑定(bind)发生得太快了。在结果开始填充之前，用户只有时间按下一个按键。我有一个阻止 UI 元素，可防止在加载结果时与页面交互，从而在加载结果之前将搜索查询停止在单个字符处。

我知道有一个名为 rateLimit 的 knockout 扩展器将调用延迟到更改停止后的指定时间段后，但将其添加到“searchTerm”的定义中时我无法看到任何差异。我应该使用其他方法吗？

我已经提供了我的搜索框、可观察的“searchTerm”的定义以及它用于加载网格结果的位置:

<input data-bind="value: searchTerm, valueUpdate: 'afterkeydown'" />

knockout :

var app = app || {};
    app.data = @Html.Raw(Json.Encode(Model));

app.CreateVM = function (data) {
    var vm = {};
    vm.searchTerm = ko.observable(data.Search);
    ...
}

vm.filterResults = function () {
    app.getResultsList(vm.selectedItem(), vm.searchTerm(), vm.currentPage() + 1, vm.sortDirection(), vm.sortProperty(), updateGrid);
}

app.getResultsList = function (Id, searchTerm, pageIndex, sortDirection, sortProperty, callBack) {

$.ajaxCall({
    url: $('#clientGrid').data('url'),
    type: 'GET',
    dataType: 'json',
    data: {
        Id: Id,
        pageIndex: pageIndex,
        sortDirection: sortDirection,
        sortProperty: sortProperty,
        filter: searchTerm
    },
    ...
}

Answer 1

您还没有发布相关代码，所以我无法确定，但我猜问题是您每次都手动触发更新，而不是使用 searchTerm 可观察的改变事件来触发它。实现此目的的 knockout 方法是将结果网格数据绑定(bind)到计算的可观察量。

这是一个演示 rateLimit 扩展的 jsFiddle:fiddle

如果您想包含更多有关触发 ajax 调用以更新网格的代码，我们可能可以帮助查明问题。