Question

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

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块，则不应解析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");
        });
    }
};

自定义敲除绑定与引导程序Typeahead问题与空值

1 个答案: