2つのテキストボックス値を一緒に追加するKnockOutJS

debugcn 投稿 Dev

マーク

私がやろうとしているのは、KnockOutに2つのテキストボックスの値を加算させ、その結果を3番目のテキストボックスに入れることだけです。

私はここにJSFiddleを持っています：jsFiddle

私のHTMLボックスは次のとおりです。

<input data-bind="value:AirportPickup" data-val="true" data-val-number="The field Airport Pickup £10 per person must be a number." data-val-required="The Airport Pickup £10 per person field is required." id="AirportPickup" name="AirportPickup" type="text" value="0" />

<input data-bind="value:PackedLunch" data-val="true" data-val-number="The field Packed Lunch £6.50 must be a number." data-val-required="The Packed Lunch £6.50 field is required." id="PackedLunch" name="PackedLunch" type="text" value="0" />

<input data-bind="value:Breakfast" data-val="true" data-val-number="The field Breakfast £6.00 must be a number." data-val-required="The Breakfast £6.00 field is required." id="Breakfast" name="Breakfast" type="text" value="0" />

...そして私のjQueryは：

$(document).ready(function () {

function AppViewModel() {
    this.AirportPickup = ko.observable("");
    this.PackedLunch = ko.observable("");
    this.Breakfast = AirportPickup + PackedLunch;
}
ko.applyBindings(new AppViewModel());
});

ただし、最初の2つのテキストボックスに何かを入力しても、何も起こりません。

誰か助けてもらえますか？

ありがとうございました

ジェイソンp

計算されたオブザーバブルを使用します：

http://jsfiddle.net/7kQP6/

$(document).ready(function () {

    function AppViewModel() {
        this.AirportPickup = ko.observable(0);
        this.PackedLunch = ko.observable(0);
        this.Breakfast = ko.computed(function () {
            return Number(this.AirportPickup()) + Number(this.PackedLunch())
        }, this);
    }
    ko.applyBindings(new AppViewModel());
});

このコードには検証が必要であることに注意してください（たとえば、入力が数値であることを確認してください）。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]