0

我正在开发一个 SPA 网络应用程序，但遇到了问题。我有一个接受文本的输入字段，如下所示： 

<input type="text" 
       data-bind="typeahead: containers(), 
                  updater: containerupdatefunction, 
                  attr: { placeholder: 'ABCD-123456-7' }, 
                  event: { change: checkContainerNumber }, 
                  value: containerNumber, 
                  style: { backgroundColor: containerNumberCorrect() ? 'rgba(0,255,0,0.4)' : 'rgba(255,0,0,0.4)' } " 
       required />

一切都正确加载。这是我想要但无法工作的内容：

当我单击输入字段并输入一个字符时，我会得到一个包含自动完成单词的列表，它可以正常工作，但是，当我单击其中一个时，update两个功能都会被触发。如果containerupdatefunction在此之前触发，checkContainerNumber则我的值已正确加载，但这仅发生 10 次。

我需要这两个更新功能，因为这个输入字段还允许用户输入一个新数字。但这需要首先检查。

知道如何解决这个问题吗？ValueUpdate 的东西（已经尝试过但还可以）？

如果包含在 event: 中的函数在 thechange{checkContainerNumber }之前触发，updater:那么我得到的值就是我输入的几个字符的值。所以当我选择其中一个时，不是自动完成。

有人可以帮忙吗，如果有什么遗漏或者您需要更多信息，请告诉我。

请记住，仅当您单击自动完成列表的值时才会触发更新程序功能。

这是淘汰赛引导绑定： // 绑定 twitter typeahead

ko.bindingHandlers.typeahead = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var $element = $(element);
        var allBindings = allBindingsAccessor();
        var typeaheadArr = ko.utils.unwrapObservable(valueAccessor());

        $element.attr("autocomplete", "off")
                .typeahead({
                    'source': typeaheadArr,
                    'minLength': allBindings.minLength,
                    'items': allBindings.items,
                    'updater': allBindings.updater
                });
    }
};

这是我的模型视图：

this.checkContainerNumber = function(item, element) {
            var t =  $(element.target).val();
        };

        this.containerupdatefunction = function(item, element) {
            var t = item;
            containerNumber(item);
            return item;
        };




        /*
        this.checkContainerNumber = function (item, element) {
            if (!updaterTriggered()) {
                if (containerNumber().length == 13) {
                    checkContainerNumberFunction(containerNumber());
                    updaterTriggered(true);
                } else {
                    containerNumberCorrect(false);
                }
            }
            return;
        };

        function checkContainerNumberFunction(containerNumberToCheck) {
            try {
                if (mapContainers[containerNumberToCheck].ContainerNumber() != undefined) {
                    container(mapContainers[containerNumberToCheck]);
                    return;
                }
            } catch(err) {

            }

            if (containerNumberToCheck.trim().length == 13 && containerNumberToCheck != undefined) {
                $.get(
                    "http://localhost:60312/api/baseapi/checkContainerDigit?digit=" + containerNumberToCheck,
                    function (data) {
                        if (data == true) {
                            containerNumberCorrect(true);
                        } else {
                            containerNumberCorrect(false);
                        }
                        updaterTriggered(false);
                    }
                );
            } else {
                containerNumberCorrect(false);
                updaterTriggered(false);
            }
        };

        this.updateViewAfterContainerSelection = function (item) {
            if (!updaterTriggered()) {
                updaterTriggered(true);
                containerNumber(item);
                checkContainerNumberFunction(containerNumber());
            }
            return item;
        };
        */

这是我到目前为止所尝试的！

4

0 回答 0