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;
};
*/
これは私がこれまでに試したことです!