Question

我非常（非常！）对Knockout很新，我希望你能指出我在以下问题上的正确方向。

上找到了我正在寻找的最终结果的示例

最终，我希望在表格行中有一些复选框，这些复选框绑定到一个价格（将动态加载）。行中的最后一个单元格将保留已选择的所有价格的平均值（已选中复选框的位置）。

这就是我使用ViewModel：

//--Page ViewModel

//--Set the structure for the basic price object
function Price(quote) {
  this.quote = ko.observable(quote);
}

//--Sets the structure for the contract month object
//--This includes the month, and array of Price and an average
function ContractMonthPrices(month, prices) {
  this.month = month;
  this.prices = $.map(prices, function(quote) { return new Price(quote); });

  this.average = ko.computed(function() {
      var total = 0;
      for(var i = 0; i < this.prices.length; i++)
        total += this.prices[i].quote();
      return total;
  }, this);
}

我知道这可能没用，但任何帮助都会非常感激！

谢谢！

Answer 1

我稍微修改了你的小提琴，假设你的源数据是这样的：

var allPrices = [
    { month: 'January', prices: [ 3, 4, 4, 4 ] },
    { month: 'February', prices: [ 7, 8, 2, 3 ] },
    { month: 'March', prices: [ 7, 8, 2, 1 ] }
];

http://jsfiddle.net/2Ccvk/5/

我完全用完整的数据绑定重写了你的标记。

要获得average计算可观察的工作量，我已将selected道具添加到您的每个价格中：

function Price(quote) {
    this.quote = ko.observable(quote);
    this.selected = ko.observable(true); // bound to checkbox in markup
}

您的代码也进行了大量更改和修复。

P.S。我已将$.map更改为ko.utils.map，因为KO拥有执行常见数组操作的方法。如果需要，您可以安全地继续使用jQuery方法。

使用复选框构建表并使用Knockout.js绑定到数据

1 个答案: