KnockoutJS如何为数组的每个项实现计算的observable？

Question

我需要为数组的每个元素都有一个计算的observable。此计算的可观察量的分辨率需要依赖于每个数组元素的上下文中存在的其他属性。

请检查以下示例案例：

这是KnockoutJS foreach绑定到嵌套数组的结果，具有group = category，以及嵌套在每个类别中的项。

在我的场景中，初始数组有＆＃34; plain＆＃34;其元素中的属性，如同从后端检索，以后稍后映射到具有相同结构的另一个数组，但将quantity属性故意设置为knockout observable。在这个映射过程中，我将数量设置为可观察的淘汰赛，我还需要设置另一个计算的可观察属性来表示项目总数（价格属性x数量属性）。此项目的总计算可观察量必须发生在数组的每个元素中，并且必须依赖于每个数组元素上下文中的price和quantity属性的内容。

请检查以下屏幕截图，想象一个条形菜单，其中在输入标记上输入数量绑定到可观察数组元素，并且在更改每个数量时，绑定到td标记的计算可观察量应该反映项目总计算。 / p>

Please also check the JS Fiddle for this

正如您将在JS Fiddle中注意到的，这部分在数组映射函数中实现totalComputed属性显然是错误的，它不起作用。

totalComputed: ko.computed(function() {
          return element.items[indexInArrayItems].quantity * element.items[indexInArrayItems].price;
        })

你能帮忙，最好让我的JS Fiddle工作吗？

Answer 1

你需要通过创建可观察变量来利用淘汰的力量，然后observableArray在你的计算函数中有依赖关系，以便每当任何依赖变化时你的计算得到自动更新。

这是基于您的JS小提琴示例：https://jsfiddle.net/rnhkv840/22/

var MainViewModel = function(){
 var self = this;
 self.dataSource = ko.observableArray([]);
 //probably inside your ajax success
 self.dataSource($.map(dataFromBackend, function (item) {
   return new CategoryViewModel(item);
  }));
}

var CategoryViewModel = function(data){
  var self = this;
  self.Items = ko.observableArray($.map(data.items, function (item) {
    return new ItemViewModel(item);
  }));
  self.category = ko.observable(data.category);
}

var ItemViewModel = function(data){
  var self = this;
  self.description = ko.observable(data.description);
  self.price = ko.observable(data.price);
  self.quantity = ko.observable(data.quantity);
  self.totalComputed = ko.computed(function () {
      return self.price() * self.quantity();
  });
}
var vm = new MainViewModel();
ko.applyBindings(vm);