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

对于Knockout,我非常(非常！)很新,希望您可以针对以下问题为我指明正确的方向.

我有一个在jsFiddle上寻找最终结果的示例

最终,我希望表行中有多个复选框,这些复选框与价格绑定(将被动态加载).该行的最后一个单元格将保存所有已选择价格(已选中此复选框的价格)的平均值.

据我对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);
}

我知道这可能没用,但是任何帮助将不胜感激！

谢谢！

解决方法:

我假设您的源数据如下所示,对您的提琴进行了一些修改：

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/

我已经完全使用数据绑定完全重写了您的标记.

为了获得可计算的平均可观察工作量,我已将所选道具添加到您的每个价格中：

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

在您的代码中也进行了许多更改和修复.

附言我已经将$.map更改为ko.utils.map,因为KO具有执行常见数组操作的方法.您可以根据需要安全地继续使用jQuery方法.

标签：knockout-js,html,javascript
来源： https://codeday.me/bug/20191123/2066477.html