Knockout.js 敲除计算可观测值仅识别一个可观测值

Knockout.js 敲除计算可观测值仅识别一个可观测值,knockout.js,Knockout.js,背景:我正在使用Knockout 3.4.0制作一个网页。在页面上,我使用计算出的可观察值来计算费用成本(以美元为单位)。费用可以是百分比或固定费率,此百分比/固定费率信息可以插入两个文本框之一。我使用单选按钮和jQuery让用户选择哪个文本框处于活动状态,因为用户只能选择百分比或固定利率。我还使用JSON和ko.mapping加载视图模型,但这似乎不是问题所在。我还应该提到,客户端的目标浏览器是IE11或Edge 问题:计算的可观测值似乎没有订阅统一费率文本框中的更改。当我在本地主机上运行应用

背景:我正在使用Knockout 3.4.0制作一个网页。在页面上,我使用计算出的可观察值来计算费用成本(以美元为单位)。费用可以是百分比或固定费率,此百分比/固定费率信息可以插入两个文本框之一。我使用单选按钮和jQuery让用户选择哪个文本框处于活动状态,因为用户只能选择百分比固定利率。我还使用JSON和ko.mapping加载视图模型,但这似乎不是问题所在。我还应该提到,客户端的目标浏览器是IE11或Edge

问题:计算的可观测值似乎没有订阅统一费率文本框中的更改。当我在本地主机上运行应用程序(应用程序本身是.NET MVC)时,统一费率文本框会响应一次。当我将代码移动到用于编写此报告时,该框根本没有响应。以下是可观察到的结果:

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个小时试图解决这个问题。以下是我尝试过的一些方法:

  • 我以不同的方式定义了视图模型,例如函数或JavaScript对象:
    var viewModel={…}

  • 我已经把服务费变成了一个可观察的-没有结果,所以我改回来了

  • 我将百分比文本框复制到统一费率文本框上,以确保其他属性相同

  • 我已经从
    ko.computed()
    切换到
    ko.pureComputed()

  • 我已经切换了条件语句的操作顺序,因此我首先检查了self.ServiceFee.FlatRate()。这会导致统一费率文本框更新费用,但不会更新百分比。根据这一事实,我做了一次搜索并找到了这个,但是在调用计算机中的两个观测值时,我没有得到一个工作结果。我还尝试了这个解决方案的不同变体,比如使用可观测值创建变量,或者将它们相加。不管我做什么,似乎条件语句中检查的第一个变量就是接收订阅的变量

    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组合起来
  • 您在确定何时使用百分比和何时使用浮动汇率的条件时犯了一个错误
  • 我已经把你的密码修好了
    //您根本不需要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
    !=
    !=