添加2个数字,然后根据复选框减去数字

时间:2011-11-10 14:19:17

标签: javascript knockout.js

以下是我正在尝试做的事情:

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

我有点卡住,因为我发现你不能输入一个依赖的observable并让它更新。基本上你有2个数字。你将它们加在一起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>

2 个答案:

答案 0 :(得分:2)

在这种情况下,您需要考虑使用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函数拦截写入,并允许你反转你的逻辑并更新适当的observable。

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

答案 1 :(得分:-1)

您没有正确配置dependentObservable。您必须将viewmodel本身作为参数传递。然后在dependentObservalbe中,使用“this”来引用viewmodel。

我在http://jsfiddle.net/photo_tom/5MxwV/2/

更新了小提琴