使用Knockout.js从选择列表更新值

Question

我试图通过允许可编辑的价格而不是固定的值来修改在基因敲除网站上找到的列表和集合教程 。

现在，页面加载时，列表和数据会正确填充。 但是，如果我从列表中选择一个新值，则该行的价格和ID不会更改。 总附加费会更改，但行本身不会更改。 另外，如果我手动更改给定行的价格，总附加费也不会改变。

我尝试将单个值设置为可观察的值，如下所示，但是当选择新的列表项时，价格和ID值仍然不会更新，只有总附加费

function RowReservation(initialRow) {
    var self = this;

    self.row = ko.observable(initialRow);
    self.rowID = ko.observable(self.row().rowID);
    self.price = ko.observable(self.row().price);
}

所以我似乎无法弄清两个问题

1. 在列表中选择新商品时，相应的价格和编号不会更改

2. 如果手动更改价格，总附加费不会更新

编辑-我列表的第1个已修复，而第2个部分已修复。

如果我在任一行的文本框中更改了价格，则只有在添加另一行或更改另一行名称的情况下，总附加费才会更新。 基本上，这不是立即更改，只有在引入新值时才进行计算。 我该如何使其自动更新？ 是否可以订阅价格文本框？**

这是更新的小提琴

Answer 1

您唯一需要修改的代码就是HTML第17行的这一部分

<input data-bind="value: price" />

进入

<input data-bind="value: $data.row().price"/>

最初绑定“ price”时，是将其绑定到RowReservation对象的price属性。 当“行”值更改时，“价格”属性的值未更新。 因此，它仍然显示原始价格。

我更改了绑定，以使其显示“行”的价格属性。 因此，当通过在组合框中选择其他项目来更改“行”时，价格将更新为新选择的行的价格。

基本上你有

// RowReservationObject

{'row': 
    {'rowName': 'Standard',
     'rowID': 1, 
    'price': 19.99 },   // --> this is what I'm binding against now
'rowID': 1 
'price': 19.99}  // -- this is what you were binding against before

如果稍微更改变量名，它可能对您来说更清晰。 我希望我有道理。