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

Question

我有一个项目列表，每个项目都包含许多文本字段。文本字段需要是带有事件处理程序的可观察对象，这样如果用户更改条目，事件处理程序就会被调用并相应地进行操作。

这是数组声明：

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

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

总计：输入数据-bind='值：总计'

我在这里创建了一个 JSFiddle：

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

这个想法是，如果用户在其中一个项目中输入/更改数量，则更新给定尺寸的总和，并更新生成的 TOTAL 值。

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

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

感谢收看 :)

Answer 1

您应该使用ko.computed 函数。数量和大小需要可观察以更新总计。所以需要考虑面向对象，需要作为Item的模型。

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/