当observable被设置时防止从调用订阅中敲出
问题描述:
我有两个绑定到他们自己的observable的输入。两者都有一个启动ajax调用的订阅功能。还有一些其他字段将从ajax结果中填写。我希望能够在输入companyName时获取数据。我还希望在输入cardNumber时获取companyName(以及更多),但给companyName一个值将触发其subscibe函数,该函数将启动另一个ajax调用。我想防止这种情况发生。当observable被设置时防止从调用订阅中敲出
cardNumber = ko.observable();
companyName = ko.observable();
cardNumber.subscribe(function() {
getDataFromCardNumber(cardNumber());
});
companyName.subscribe(function() {
getDataFromCompanyName(companyName());
});
getDataFromCardNumber = function (cardNr) {
$.ajax({
type: 'GET',
data: { number: cardNr },
url: '/Home/GetCardInfo',
success: function (data) {
companyName(data.Company.CompanyName);
//some other fields
}
});
};
//getDataFromCompanyName(name) contains another ajax call to fill out some other fields aswell
答
我看到两个选项:
- 你可以在回调之前写的
dispose
订阅,然后当新的值设置重新连接它。
const obsA = ko.observable("a");
const obsB = ko.observable("b");
const updateA = newVal => setTimeout(
() => {
subA.dispose();
obsA("reset by B");
subA = obsA.subscribe(updateB);
}, 500);
const updateB = newVal => setTimeout(
() => {
subB.dispose();
obsB("reset by A");
subB = obsB.subscribe(updateA);
}, 500);
let subA = obsA.subscribe(updateB);
let subB = obsB.subscribe(updateA);
ko.applyBindings({ obsA, obsB });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
A: <input data-bind="value: obsA" />
B: <input data-bind="value: obsB" />
- 您可以创建调用其
write
逻辑更新单独的UI观测:
const obsA = ko.observable("a");
const obsB = ko.observable("b");
const uiObsA = ko.computed({
read: obsA,
write: val => {
obsA(val);
updateB();
}
});
const uiObsB = ko.computed({
read: obsB,
write: val => {
obsB(val);
updateA();
}
});
const updateB = newVal => setTimeout(
() => obsB("reset by A"), 500);
const updateA = newVal => setTimeout(
() => obsA("reset by B"), 500);
ko.applyBindings({ obsA, obsB });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
A: <input data-bind="value: uiObsA" />
B: <input data-bind="value: uiObsB" />
答
在调用ajax请求之前,您可以随时查看是否已经存在卡号或公司名称。
cardNumber.subscribe(function() {
if (!companyName()){
getDataFromCardNumber(cardNumber());
}
});
companyName.subscribe(function() {
if (!cardNumber()){
getDataFromCompanyName(companyName());
}
});
可写计算函数是我正在寻找的。这帮助我解决了我的问题:) – Sindre