2

「Vol」のオブザーバブルを含む「Parts」のオブザーバブル配列を使用しています。現在、各パーツのボリュームと合計量が表示されています。アプリケーションが起動すると、合計金額が正しく追加されます。ただし、パーツのボリュームを変更しても、合計量は再計算されません。

HTML：

<ul>
    <li data-bind="foreach:  Parts">
        <input data-bind="value: Vol" />
<br/>
    </li>
</ul>

<br/>
<br/>
<span data-bind="text: fullVol "></span>

Javascript：

    function Part (data) {

       var self = this;
        self.Vol= ko.observable(data.Vol);

    }


    function AppViewModel() {
       var self = this;


        self.Parts = ko.observableArray([new Part({"Vol": 1}), new Part({"Vol":2}), new Part({"Vol":3})]);
        self.fullVol = ko.computed(function() {
            var total = 0;
           $.each(self.Parts(), function() { total += (this.Vol() ) })
            return total;
        });
    }


ko.applyBindings(new AppViewModel());

これが私のJsFiddleです：http：//jsfiddle.net/jwinstonaspen/Zmkew/6/

4

1 に答える 1

5

バインディングノックアウトを使用するvalue: Volと、入力は整数に変換されず、ユーザーが入力したデータが文字列として格納されるだけです。

したがって、合計を計算する前に、整数に解析する必要があります。

$.each(self.Parts(), function() { total += (parseInt(this.Vol()) ) })

固定フィドル。

ここで解析を行っているので、ユーザーが数値以外の入力を入力した場合に対処することを忘れないでください。

ただし、解析を抽象化するカスタムバインディングハンドラーを簡単に作成できます。

または、を使用して行うことができますko.extenders。ドキュメントにも例があります。

于 2012-12-06T20:40:40.293 に答える