0

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

这是数组声明：

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

谢谢你看:)

4

1 回答 1

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/

于 2013-01-30T22:14:26.493 回答