Knockout.js 敲除计算可观测值仅识别一个可观测值
背景:我正在使用Knockout 3.4.0制作一个网页。在页面上,我使用计算出的可观察值来计算费用成本(以美元为单位)。费用可以是百分比或固定费率,此百分比/固定费率信息可以插入两个文本框之一。我使用单选按钮和jQuery让用户选择哪个文本框处于活动状态,因为用户只能选择百分比或固定利率。我还使用JSON和ko.mapping加载视图模型,但这似乎不是问题所在。我还应该提到,客户端的目标浏览器是IE11或Edge 问题:计算的可观测值似乎没有订阅统一费率文本框中的更改。当我在本地主机上运行应用程序(应用程序本身是.NET MVC)时,统一费率文本框会响应一次。当我将代码移动到用于编写此报告时,该框根本没有响应。以下是可观察到的结果:Knockout.js 敲除计算可观测值仅识别一个可观测值,knockout.js,Knockout.js,背景:我正在使用Knockout 3.4.0制作一个网页。在页面上,我使用计算出的可观察值来计算费用成本(以美元为单位)。费用可以是百分比或固定费率,此百分比/固定费率信息可以插入两个文本框之一。我使用单选按钮和jQuery让用户选择哪个文本框处于活动状态,因为用户只能选择百分比或固定利率。我还使用JSON和ko.mapping加载视图模型,但这似乎不是问题所在。我还应该提到,客户端的目标浏览器是IE11或Edge 问题:计算的可观测值似乎没有订阅统一费率文本框中的更改。当我在本地主机上运行应用
self.serviceFeeComputed= ko.computed(function () {
if (self.ServiceFee.Percentage() !== null
&& self.ServiceFee.Percentage() !== 0) {
return self.Amount() * (self.ServiceFee.Percentage() / 100);
} else {
return self.ServiceFee.FlatRate();
}
});
尝试解决:在过去的两周里,我花了大约6-8个小时试图解决这个问题。以下是我尝试过的一些方法:
var viewModel={…}
ko.computed()
切换到ko.pureComputed()
self.serviceFeeComputed = ko.computed(function () {
self.ServiceFee.Percentage();
self.ServiceFee.FlatRate();
if (self.ServiceFee.Percentage() !== null && self.ServiceFee.Percentage() !== 0) {
return self.Amount() * (self.ServiceFee.Percentage() / 100);
} else {
return self.ServiceFee.FlatRate();
}
});
提前感谢。您的问题来自两个方面:
//您根本不需要jQuery,KO就足够了
//您需要一个布尔属性来确定是使用Flatrate还是百分比
自助服务费={
百分比:ko.可观察(),
FlatRate:ko.可观察(),
IsPercentage:ko.observable(true)//将此属性添加到ServiceFee
};
self.serviceFeeComputed=ko.computed(函数(){
//if(self.ServiceFee.Percentage()!==null&&self.ServiceFee.Percentage()!==0){
如果(self.ServiceFee.IsPercentage()){//这是正确的条件
返回self.Amount()*(self.ServiceFee.Percentage()/100);
}否则{
返回自助服务费.固定费率();
}
});
…其他代码。。。
…其他代码。。。
…其他代码。。。
导致框根本没有响应的原因是您在HTML绑定时犯了一个打字错误。text:serviceFeeComputed
需要修复为text:serviceFeeComputed
另外,您能解释一下您希望文本框从用户的角度具有什么行为吗?我不确定是否理解您的意思你的目的。你用jQuery做的太多了,这对你自己来说太复杂了。你应该能够完成你需要的一切,包括用敲除来启用/禁用输入。@trgiangvp3-嗨,谢谢你注意到我的打字错误。我添加了那个标记,以便我们可以在页面上看到serviceFeeComputed。不幸的是,修复了打字错误但是,这对原始问题没有影响。就目的而言,我希望文本框从合同总额中删除一部分。在我的示例中,我将金额初始化为1000。如果有人在百分比框中输入“1”,则应从金额中减去1%,并应在合同成本框中显示为990。如果有人在百分比框中输入“1”统一费率框,1应该从金额中减去,并显示为999。@Drummad-感谢您的反馈。我将研究如何将jQuery功能切换为使用Knockout。但是,完全删除jQuery并启用两个文本框并不能解决此问题,如您所见:谢谢您的回答-我能够解决将它的大部分集成到我的解决方案中,修改它以用于添加新数据和编辑现有数据。我仍然有兴趣了解根本原因,以便更好地理解KO的机制。对于计算的观测值,KO是否只订阅函数中的第一个观测值?不,我不这么认为。正如您所看到的在我上面发布的代码笔中,在serviceFeeComputed函数中,有3个可观察的变量,您可以从UI中更改它们,它们工作得很好。但是,我不太了解KO,无法解释为什么在Flatrate更改时不调用您的计算函数。问题完全在于您的计算逻辑。您有self.ServiceFee.Percentage()!==null和&self.ServiceFee.Percentage()!==0
,但是Percentage
永远不会是这两个值中的任何一个,因为输入值是字符串,而不是数字。您可以将其更改为self.ServiceFee.Percentage()!==null和self.ServiceFee.Percentage()!=0
(!=
到!=
)