0

SPA Web アプリケーションを開発していますが、問題が発生しています。次のようなテキストを受け入れる入力フィールドがあります。

<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 />

すべてが正しく読み込まれます。ここに私が欲しいものがありますが、うまくいきません:

入力フィールドをクリックして文字を入力すると、正常に機能するオートコンプリート単語のリストが表示されます、そのうちの 1 つをクリックすると、update両方の機能がトリガーされます。containerupdatefunction前にトリガーされた場合checkContainerNumber、値は正しく読み込まれますが、これは 10 回に 1 回しか発生しません。

この入力フィールドには、ユーザーが新しい番号を入力することもできるため、これら 2 つの更新関数が必要です。しかし、これは最初に確認する必要があります。

どうすればこれを解決できますか?ValueUpdate で何か (既に試しましたが、問題ありません)?

event: に格納されている関数が のchange{checkContainerNumber }前にトリガーされた場合updater:、取得する値は、入力した数文字の値です。そのため、それらのいずれかを選択したときのオートコンプリートではありません。

誰かが助けてくれませんか、何か不足している場合、またはより多くの情報が必要な場合は教えてください.

アップデータ機能は、オートコンプリート リストの値をクリックしたときにのみトリガーされることに注意してください。

これがノックアウト ブートストラップ バインディングです。

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