计算的 observables 没有更新

Question

我有一个可观察数组，其中包含 4 个可观察（数量、折扣、费率、税）和 1 个计算字段（总计），即（价格 * 费率）-折扣 + 税。当我在数组中添加新项目并更改 qty、rate 等的值时，ui 会按预期更新，但是当使用数据（某些产品）初始化视图模型时，对于这些行，ui 不会更新。

这是我的代码

var pList=@Html.Raw(Json.Encode(Model.ProductList));
        var product = function (item) {

            var self = this;
            this.Qty = ko.observable(0);
            this.Rate = ko.observable(0);
            this.Discount = ko.observable(0);
            this.Tax = ko.observable(0);
            this.Amount = ko.computed(function () {


                return (parseFloat(self.Qty()) * parseFloat(self.Rate())) - parseFloat(  self.Discount() )+ parseFloat( self.Tax());

            },this);


            for (var f in item) {
                self[f] = ko.observable(item[f]);
            }

        };
        var productModel = function (prds) {
            var self = this;
            self.products = ko.observableArray(ko.utils.arrayMap(prds, function (item) {
                return new product(item);
            }));
            self.productList=pList;
            self.addProduct = function () {

                self.products.push(new product());
            };
            self.removeProduct = function (product) {

                self.products.remove(product);

            };
            self.GrossTotal = ko.computed(function () {

                var total = 0;
                for (var i = 0; i < self.products().length; i++) {

                    total += parseFloat( self.products()[i].Amount());
                }
                return total;
            });

        };


        var viewModel = new productModel(@Html.Raw(Json.Encode(Model.Products)));
        ko.applyBindings(viewModel);

HTML：

                            <table class="table grid table-bordered table-hover text-center">
                                <thead>
                                    <tr>
                                        <th>Product</th>
                                        <th>Order Qty</th>
                                        <th>Rate</th>
                                        <th>Discount</th>
                                        <th>Tax</th>
                                        <th>Amount</th>
                                        <th>Remove</th>

                                    </tr>
                                </thead>
                                <tbody data-bind="foreach: products">
                                    <tr>
                                        <td>
                                            <select class="span4 form-control grid" style="min-width: 180px;"
                                                data-bind='options:$root.productList, value:ProductId, optionsText:"Text", optionValue:"Value",attr:{name:"Products["+$index() + "].ProductId"  } '>
                                            </select>
                                        </td>
                                        <td class="span-1">
                                            <input type="text" class="form-control"
                                                data-bind='value:Qty,attr:{ name:"Products["+$index()+"].Qty"  }' />

                                        </td>
                                        <td class="span-1">
                                            <input type="text" class="form-control"
                                                data-bind='value:Rate,attr:{ name:"Products["+$index()+"].Rate"  }' />

                                        </td>
                                        <td class="span-1">
                                            <input type="text" class="form-control"
                                                data-bind='value:Discount,attr:{ name:"Products["+$index()+"].Discount"  }' />

                                        </td>
                                        <td class="span-1">
                                            <input type="text" class="form-control"
                                                data-bind='value:Tax,attr:{ name:"Products["+$index()+"].Tax"  }' />

                                        </td>
                                        <td class="span-1">
                                            <input type="text" class="form-control"
                                                data-bind='value:Amount,attr:{ name:"Products["+$index()+"].Amount"  }' />
                                        </td>
                                        <td class="span-1">
                                            <a href="#" data-bind="click:$root.removeProduct">Remove</a>

                                        </td>
                                    </tr>

                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th>Count : <span data-bind="text: products().length"></span></th>
                                        <th>Qty :<span data-bind="text: TotalQty()"></span></th>
                                        <th></th>
                                        <th>Discount :<span data-bind="text:DiscountTotal()"></span></th>
                                        <th>Tax :<span data-bind="text:TaxTotal()"></span></th>
                                        <th>Amount :<span data-bind="text:NetAmount()"></span></th>
                                        <th></th>

                                    </tr>


                                </tfoot>

                            </table>

这是工作的jsfiddle link

任何帮助都会得到帮助
非常感谢

Answer 1

这很可疑：

for (var f in item) {
    self[f] = ko.observable(item[f]);
}

如果项目的键与产品对象上的现有属性匹配，则可观察的属性将被覆盖。然后计算出的 observable 最终将订阅旧的 observable 属性，但新值将存储在新的 observable 属性中。这可能解释了奇怪的行为。

我建议在定义计算值之前更新产品的属性（例如，self[f](item[f])）而不是替换可观察对象，或者使用项目中的值作为初始可观察对象的默认值。