Question

我正在开发一个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次中的1次。

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

知道如何解决这个问题吗？使用ValueUpdate的东西（已经尝试但没问题）？

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

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

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

这是knockout-bootstrap绑定： //绑定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;
        };
        */

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

无法使用我的更新功能来使用JavaScript

0 个答案: