0

アイテムのリストがあり、各アイテムはいくつかのテキストフィールドで構成されています。テキストフィールドは、ユーザーがエントリを変更した場合にイベントハンドラーが呼び出され、それに応じてアクションが実行されるように、イベントハンドラーを使用して監視可能である必要があります。

配列宣言は次のとおりです。

self.items = ko.observableArray(ko.utils.arrayMap(items, function(item) {
    return { quantity: item.quantity, size: item.size };
}));

...そして合計数量のテキストボックスがあります。基本的に、配列の行の数量を編集するときに、現在の合計を表示するテキストボックスが必要です。

合計：入力データバインド='値：合計'

ここでJSFiddleを作成しました：

http://jsfiddle.net/phykell/HyYFq/

ユーザーがアイテムの1つに数量を入力/変更すると、指定されたサイズの合計が更新され、結果のTOTAL値が更新されるという考え方です。

どんなアドバイスも歓迎します-私はここで説明されている方法を使おうとすべきでしょうか：

http://knockoutjs.com/documentation/unobtrusive-event-handling.html

見てくれてありがとう:)

4

1 に答える 1

1

関数を使用する必要がありko.computedます。合計を更新するには、数量とサイズを監視できる必要があります。したがって、オブジェクト指向として考える必要があり、アイテムとしてのモデルである必要があります。

var initialData = [
    { quantity: "100", size: "8" },
    { quantity: "200", size: "10" }
];
var Item = function (q, s) {
    this.quantity = ko.observable(q),
    this.size = ko.observable(s)
}
var ItemsModel = function(items) {
    var self = this;
    self.items = ko.observableArray(ko.utils.arrayMap(items, function(item) {
        return new Item(item.quantity, item.size);
    }));
    self.addItem = function() {
        self.items.push(new Item(1,1));
    };
    self.removeItem = function(item) {
        self.items.remove(item);
    };
    self.total = ko.computed(function() {
        var total = 0;
        ko.utils.arrayForEach(this.items(), function(item) {
            total += item.quantity() * item.size();
        });
        return total;
    }, self);
};

ko.applyBindings(new ItemsModel(initialData));

ライブ： http： //jsfiddle.net/HyYFq/1/

于 2013-01-30T22:14:26.493 に答える