在数组中使用事件处理程序创建可观察对象

Question

我有一个项目列表，每个项目都包含许多文本字段。 文本字段必须具有可观察到的事件处理程序，以便用户更改条目时，将调用事件处理程序并采取相应的措施。

这是数组声明：

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

...还有一个用于显示总量的文本框。 基本上，在编辑数组行中的数量时，我需要文本框来显示运行总计：

总计：输入数据绑定=“值：总计”

我在这里创建了一个JSFiddle：

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

这样的想法是，如果用户在其中一项中输入/更改数量，则总计将更新给定大小，并且将更新结果TOTAL值。

欢迎任何建议-我应该尝试使用此处描述的方法：

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

感谢您的光临:)

Answer 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/