加上两个数字,然后减去数字取决于复选框

Add 2 numbers then subtract numbers depending on checkbox

本文关键字:数字 然后 复选框 取决于 两个      更新时间:2023-09-26

下面是我要做的事情的概要:

http://jsfiddle.net/5MxwV/1/

我有点卡住了,因为我发现你不能输入一个依赖的可观察对象并让它更新。基本上你有两个数字。把它们加起来4 + 5 = 9。现在,当您点击一个复选框(或者如果没有复选框也可以这样做)时,禁用第二个数字(5),并允许输入最后一个数字(9)。所以你可以在9所在的最后一个框里输入公式就是9 - 4这样就得到了第二个数字。所以你可以把9改成10,也就是10 - 4 = 6。

   // Here's my data model
var viewModel = { 
    firstNum : ko.observable(4),
    lastNum : ko.observable(5),
    reverse : ko.observable(false)
};
viewModel.add = ko.dependentObservable(function () {
    return parseInt(viewModel.firstNum()) + parseInt(viewModel.lastNum()); 
});
ko.applyBindings(viewModel); // This makes Knockout get to work

  <p>First Number: <input data-bind="value:
 firstNum , valueUpdate:'afterkeydown'" /></p>
<p>Next Number <input data-bind="value: lastNum, valueUpdate:'afterkeydown', disable : reverse" /></p>
<p>Last Number:<input data-bind="value: add, valueUpdate:'afterkeydown', enable : reverse" /></p>
<p>Subtract : <input type="checkbox"  data-bind="checked: reverse" ></p>
<br />
<p data-bind="text: ko.toJSON(viewModel)"></p>

对于这种情况,您将需要考虑使用writeable dependentObservable

可能看起来像:

viewModel.add = ko.dependentObservable({
    read: function() {
       return parseInt(this.firstNum(), 10) + parseInt(this.lastNum(), 10)
    },
    write: function(newValue) {
       this.lastNum(parseInt(newValue, 10) - parseInt(this.firstNum(), 10));
    },
    owner: viewModel
});

所以,这个想法是你的read函数返回值和write函数拦截写,并允许你逆转你的逻辑和更新适当的可观察对象。

http://jsfiddle.net/rniemeyer/jsZde/

您没有正确配置dependentObservable。您必须将视图模型本身作为参数传入。然后在dependentObservalbe中,使用"this"来引用视图模型。

我已经更新了提琴在http://jsfiddle.net/photo_tom/5MxwV/2/

相关文章: