ノックアウト計算された変数が表示されません

Question

私は以下の観測値を持っていますが、フィールドを更新すると私の合計は更新されません。

var formdata = ko.observable({ 
    a: 0, 
    b: 0, 
    c: 0, 
    d: 0 
}); 
var calcs = { 
    calulatedValues: function() { 
    this.total = ko.pureComputed(function() { 
     return formdata().a+formdata().b+formdata().c+formdata().d; 
    }); 
    } 
} 

$(function() { 
    ko.applyBindings(formdata, document.getElementByID("myForm")); 
    ko.applyBindings(calcs, document.getElementByID("totals")); 
}); 

<div id="totals"> 
    <div data-bind="with: calculatedValues"> 
    <div data-bind="total"></div> 
    </div> 
</div> 

Fiddle to show what's happening

Answer 1

withバインディングは新しいバインディングコンテキストを作成します。だから、にfunctionからそれを変更する必要があります。

var calcs = { 
    calulatedValues: { 
    total: ko.pureComputed(function() { 
     return formdata().a + formdata().b + formdata().c + formdata().d; 
    }); 
    } 
} 

そして、あなたは正しくtotalに結合されていません。 document.getElementByID("totals")にタイプミスがあるので、それはまだ正常に動作しません

<div id="totals"> 
    <div data-bind="with: calculatedValues"> 
    <div data-bind="text: total"></div> 
    </div> 
</div> 

：に変更します。

あなたがa、bは、c値が変更を取得するときcomputedプロパティがトリガされるようにしたい場合は、あなたは：それはId

ko.applyBindings(calcs, document.getElementById("totals")); 

ここfiddle

---

が更新ますする必要がありますformdataではなく、observablesとする必要があります。

var formdata = { 
    a: ko.observable(0), 
    b: ko.observable(1), 
    c: ko.observable(0), 
    d: ko.observable(0) 
}; 

とにtotalを変更します。

total: ko.pureComputed(function() { 
    // added the "Number" parsing, otherwise it concatenates numbers as strings 
    return Number(formdata.a()) + Number(formdata.b()) + Number(formdata.c()) + Number(formdata.d()); 
}) 

Updated fiddle