使用 knockout 以 1 个奇数输入构建 table

Question

抱歉，问题主题可能不是很准确，但我不确定还可以将其标记为什么。

我正在尝试使用 knockoutjs 干净地创建这个 table 的 2x

除了比较列使用下拉列表而不是静态输入外，保守列和比较列的所有计算都是相同的。

我目前正在使用一个函数来声明两列的所有可观察值，保护因子是一个 ko.calculated 更新所有其他可观察值。

我知道必须有更好的方法来做到这一点，因为我只是重复相同的代码并声明像 aCoverage 和 bCoverage 这样的变量

function vm() {
  self.tables = ko.observableArray();
  self.tables.push({table: new summaryTable(data)});
}
function summaryTable(data){
  this.aindem = ko.observable();
  this.alevel = ko.observable(data.level);
  this.blevel = ko.observable({id:90,name:"90%"}); //populate dropdown
  this.bindem = ko.observable();
  this.apremium = ko.observable();
  this.bpremium = ko.observable();
  this.afactor = ko.computed(function() {
    this.aindem(1+2);
    this.apremium(3+4);
  });
  this.bfactor = ko.computed(function() {
    this.bindem(1+2);
    this.apremium(3+4);
}

有一个外部输入会触发计算重新评估。因为代码太多，所以我只做了一个 jsfiddle

Answer 1

我认为更好的方法是使用主要对象实例，然后比较对象实例（不止一次比较）并使用 foreach 绑定到这些实例。我已经更新了你的 fiddle 来演示这个

http://jsfiddle.net/ffd4492e/2/

每一列对应一个汇总对象的实例，我添加了一个标志来指示它是比较对象还是主要对象。

 self.primaryFlag = ko.observable(primaryFlag);
    if(!primaryFlag)
        self.head="Compare";

然后在绑定标记中

<td data-bind="visible:primaryFlag, text:score"></td>
<td><select data-bind="visible:!primaryFlag(),options:allLevels, optionsText:'name', value:selLevel"></select></td>

下拉列表只有在比较实例时才会显示...

我也删除了重复的字段。我希望这对您的问题有所帮助。

Answer 2

您的演示在更改值时实际上没有执行任何操作。很难说出你想要它做什么。一个只有几个变量的例子会更容易理解。

您选择了进行许多观察和一些计算，并且计算设置了一堆观察。这不是一个简单的方法。您的可观察量应该包含独立值，并且应该计算基于独立值计算的值。

让我们看看您的两个变量：

self.sCoveragePA((self.score / 100 * data.refBaseValue * ffactor).toFixed(2) );
self.cCoveragePA((self.selLevel().id / 100 * data.refBaseValue * ffactor).toFixed(2));

他们只有一个输入不同。如果您只想拥有一个可以在两个地方使用的 coveragePA 变量，请将其设为依赖于另一个计算成员的计算变量。在一种情况下，计算结果只是 return self.score；在另一种情况下，self.selLevel().id.

self.coveragePA = ko.computed(function () {
  return (self.controlVar() / 100 * data.refBaseValue * ffactor).toFixed(2);
});

使用 knockout 以 1 个奇数输入构建 table

Using knockout to build table with 1 odd input

knockout.js

knockout-3.0

使用 knockout 以 1 个奇数输入构建​​ table

Using knockout to build table with 1 odd input

knockout.js

knockout-3.0

使用 knockout 以 1 个奇数输入构建 table