使用数组中的事件处理程序创建可观察对象
使用数组中的事件处理程序创建可观察对象
提问于 2013-01-31 05:44:19
我有一个项目列表，每个项目由许多文本字段组成。文本字段需要是具有事件处理程序的可观察字段，以便如果用户更改条目，则相应地调用和操作事件处理程序。
下面是数组声明：
self.items = ko.observableArray(ko.utils.arrayMap(items, function(item) {
return { quantity: item.quantity, size: item.size };
}));...and有一个文本框来表示总数量。基本上，在编辑数组行中的数量时，我需要文本框来显示运行总数：
Total: input data-bind='value: total‘
我在这里创建了一个JSFiddle：
http://jsfiddle.net/phykell/HyYFq/
其思想是，如果用户在其中一个项目中输入/更改数量，则针对给定大小更新总和，并更新产生的总值。
欢迎任何建议--我是否应该尝试使用这里描述的方法：
http://knockoutjs.com/documentation/unobtrusive-event-handling.html
感谢您的关注:)
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-01-31 06:14:26
你应该使用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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14614385
复制相关文章
相似问题
腾讯云开发者
