javascript - KnockoutJS 如何为数组的每个项目实现计算可观察值？

Question

我需要为数组的每个元素计算一个可观察值。此计算可观察量的解析需要依赖于每个数组元素上下文中存在的其他属性。

请检查以下示例案例:

这是 KnockoutJS foreach 绑定(bind)到嵌套数组的结果，有一个 group = 类别，并且每个类别中都嵌套有项目。

在我的场景中，初始数组的元素具有“普通”属性，就像从后端检索一样，稍后会映射到具有相同结构的另一个数组，但数量属性故意设置为 knockout 可观察值。在这个映射过程中，我将数量设置为 knockout 可观察值，我还需要设置另一个计算可观察属性来表示项目总数(价格属性 x 数量属性)。此项目总计算可观察值必须发生在数组的每个元素上，并且必须取决于每个数组元素上下文中的价格和数量属性的内容。

请检查以下屏幕截图，想象一个栏菜单，其中在绑定(bind)到可观察数组元素的输入标签上输入数量，并且在更改每个数量时，绑定(bind)到 td 标签的计算可观察量应反射(reflect)项目总计算。

Please also check the JS Fiddle for this

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

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

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

Answer 1

您需要通过创建可观察变量和 observableArray 来利用 knockout 的强大功能，然后在计算函数中添加依赖项，以便每次其依赖项发生变化时，您的计算函数都会自动更新。

这是基于您的 JS Fiddle 示例: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);