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/

使用数组中的事件处理程序创建observable

1 个答案: