javascript - 带有空值的 bootstrap Typeahead 问题的自定义 knockout 绑定(bind)

Question

这是我用 BootStrap typeahead 字段编写的用于 knockout 的自定义绑定(bind)。一切都按预期工作，但我遇到的唯一问题是，每当我清除我的字段时，可观察到的 knockout 仍然包含最后一个有效选择。不确定我做错了什么..

ko.bindingHandlers.productTypeahead = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext)
      {
        var root = bindingContext.$root;

        var options = ko.unwrap(valueAccessor()) || {},
                $el = $(element);

        options.source =    _.debounce(function (query, process) {
            root.api.SearchProducts(query)
                    .done(function (data) {
                        process(data);
                    }).fail(function (xhr) {
                        root._alert.error("Could not search products - " + JSON.parse(xhr.responseText).ExceptionMessage);
                    });
              } , 300);

        $el.attr("autocomplete", "off")
            .typeahead({
                source: options.source,
                autoSelect: true,
                displayText: function (item) { return item != null ? item.id : ""; },
                matcher: function () { return true; },// api does this already
                items: 15,
                minLength: 3,
                updater: function (item) {
                    options.value(item); 
                },
                highlighter: function (item) {
                    var query = this.query;
                    query = query.replace(/[^\w\']+/g, "|");
                    var queryRegex = new RegExp("\\b(" + query + ")", "gi");
                    return item.replace(queryRegex, "<strong>$1</strong>");
                }
            });

        // if KO removes the element via templating, then destroy the typeahead
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $el.typeahead("destroy");
            $el = null;
        });
    }
};

Answer 1

您可以使用 input 事件来处理这种情况。下面的代码仅检查 value === ""，您可能会发现更智能的检查在您的应用程序中效果更好。

另请注意已更改的错误处理程序 - 永远不要在没有 try/catch block 的情况下解析 JSON。

ko.bindingHandlers.productTypeahead = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var root = bindingContext.$root;
        var options = ko.unwrap(valueAccessor()) || {};

        options.source = _.debounce(function (query, process) {
            root.api.SearchProducts(query)
                .done(process).fail(function (xhr) {
                    var responseData;
                    try {
                        responseData = JSON.parse(xhr.responseText);
                        root._alert.error("Could not search products - " + responseData.ExceptionMessage);
                    } catch (ex) {
                        root._alert.error("Unexpected response: " + xhr.responseText);
                    }
                });
        } , 300);

        $(element).attr("autocomplete", "off")
            .typeahead({
                source: options.source,
                autoSelect: true,
                displayText: function (item) { return item !== null ? item.id : ""; },
                matcher: function () { return true; },// api does this already
                items: 15,
                minLength: 3,
                // you can use observables as callbacks directly
                updater: options.value,
                highlighter: function (item) {
                    var query = this.query.replace(/[^\w']+/g, "|");
                    var queryRegex = new RegExp("\\b(" + query + ")", "gi");
                    return item.replace(queryRegex, "<strong>$1</strong>");
                }
            }).on("input", function () {
                if ( this.value === "" ) {
                    options.value("");
                }
            });

        // if KO removes the element via templating, then destroy the typeahead
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).typeahead("destroy");
        });
    }
};