使用knockout构建具有1个奇数输入的表

Question

对不起，问题主题可能不是很准确，但我不确定还有什么标记为。

我正在尝试使用knockoutjs干净地创建此表的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绑定到这些实例。我已经更新了你的小提琴来演示这个

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变量，请将其作为依赖于另一个计算成员的计算。在一种情况下，计算将只返回self.score;在另一种情况下，self.selLevel().id。

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