在编辑记录上可观察的挖空 JS 计算

Knockout JS Computed Observable on edit record

本文关键字：JS 计算 观察 编辑 记录      更新时间：2023-09-26

我有三个字段1. 数量2. 单价3. 总成本我正在使用挖空JS实时计算总成本。 这在添加新记录时工作正常。 但是，当我编辑记录时，我希望在页面首次加载时，数量和单价由其在数据库中的值预填充。我已经尝试了下面的代码，该代码预填充了数量和单价，但总成本结果没有更新，现在显示为空白。 这是代码 

<tr>
    <td>
        <div class="form-group">
            <label asp-for="Quantity" class="col-md-2 control-label"></label>
            <div class="col-md-10">
                <kendo-numerictextbox name="Quantity" min="0" enable="true" data-bind="value: Quant">
                </kendo-numerictextbox>
                <span asp-validation-for="Quantity" class="text-danger"/>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td>
        <div class="form-group">
            <label asp-for="UnitPrice" class="col-md-2 control-label"></label>
            <div class="col-md-10">
                <kendo-numerictextbox name="UnitPrice" min="0" enable="true" data-bind="value: UPrice">
                </kendo-numerictextbox>
                <span asp-validation-for="UnitPrice" class="text-danger"/>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td>
        <div class="form-group">
            <label asp-for="TotalCost" class="col-md-2 control-label"></label>
            <div class="col-md-10">
                <span data-bind="text: TotalCost"> </span>
            </div>
        </div>
             <script>
             var someJSON = $.getJSON("/Expenses/EditUSExpense", function(data) {});
             var parsed = JSON.parse(someJSON);
            // Update view model properties
            var quantity = parsed.Quantity;
            var unitprice = parsed.UnitPrice;
            var ViewModel = function(quantity, unitPrice, Quantity, UnitPrice) {
                this.Quant = ko.observable(quantity);
                this.UPrice = ko.observable(unitPrice);
                this.TotalCost = ko.pureComputed(function() {
                    if (isNaN(this.Quant() * this.UPrice())) {
                        return 0;
                    }
                    return this.Quant() * this.UPrice();
                }, this);
            };
            ko.applyBindings(ViewModel);
        </script>
    </td>
</tr>

更新我已经根据下面的建议修改了我的代码，并且似乎正在从数据库中提取数量和单价，但计算字段 TotalCost 仍然显示空值，当我更改其他两个参数时，值不会更改。 这是我修改后的代码，以便有人可以查看。 我使用相同的剃须刀代码刚刚更改了 JavaScript。 $.getJSON（"/Expenses/EditUSExpense"， function （data） { var parsed = JSON.parse（data）;

        // Update view model properties
        var quantity = parsed.Quantity;
        var unitprice = parsed.UnitPrice;
        var ViewModel = function (quantity, unitPrice) {
            this.Quant = ko.observable(quantity);
            this.UPrice = ko.observable(unitPrice);

            this.TotalCost = ko.pureComputed(function () {
                if (isNaN(this.Quant() * this.UPrice())) {
                    return 0;
                }
                return this.Quant() * this.UPrice();
            }, this);
        };

        ko.applyBindings(new ViewModel(quantity, unitprice));
    });

在代码中，你将创建一个接受四个参数的函数：

var ViewModel = function(quantity, unitPrice, Quantity, UnitPrice) {

我不知道为什么四个，因为在你发布的代码中，你只使用前两个。

因此，如果您期望将前两个值作为参数，则应这样做：

var quantity = parsed.Quantity;
var unitprice = parsed.UnitPrice;
var ViewModel = function(quantity, unitPrice) {
    this.Quant = ko.observable(quantity);
    this.UPrice = ko.observable(unitPrice);
    this.TotalCost = ko.pureComputed(function() {
        if (isNaN(this.Quant() * this.UPrice())) {
            return 0;
        }
        return this.Quant() * this.UPrice();
    }, this);
};
ko.applyBindings(new ViewModel(quantity, unitprice));

这个： 

var someJSON = $.getJSON("/Expenses/EditUSExpense", function(data) {});
var parsed = JSON.parse(someJSON);

应该是：

$.getJSON("/Expenses/EditUSExpense", function(data) {
  var parsed = JSON.parse(data);
  // Rest of code...
});

而这个：

ko.applyBindings(ViewModel);

应该是：

ko.applyBindings(new ViewModel(quantity, unitprice));
相关文章：