2017-08-04 22 views
2

我有两个绑定到他们自己的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 

回答

1

我看到两个选项:

  • 你可以在回调之前写的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" />

+0

可写计算函数是我正在寻找的。这帮助我解决了我的问题:) – Sindre

1

在调用ajax请求之前,您可以随时查看是否已经存在卡号或公司名称。

cardNumber.subscribe(function() { 
    if (!companyName()){ 
     getDataFromCardNumber(cardNumber()); 
    } 
}); 

companyName.subscribe(function() { 
    if (!cardNumber()){ 
     getDataFromCompanyName(companyName()); 
    } 
});