添加2個數字，然後減去的數字視複選框

Question

這裏是我想要做的jsfiddle：

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

我有點卡住了，因爲我發現，你可以」 t輸入到一個依賴的observable中並讓它更新。基本上你有2個數字。你將它們加在一起4 + 5 = 9。現在，當你點擊一個複選框（或者如果可以不用複選框的話），你可以禁用第二個數字（5），並啓用輸入到最終數字（9）。所以你可以輸入9的最後一個框，forumla會做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> 

Answer 1

更新撥弄你會想看看使用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/

Answer 2

您沒有正確配置dependentObservable。您必須將視圖模型本身作爲參數傳遞。然後在dependentObservalbe裏面，使用「this」來引用viewmodel。

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