编辑记录上的 Knockout JS Computed Observable

Question

我有三个字段 一、数量 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>

更新 我已根据以下建议修改了我的代码，并且似乎从数据库中干净地提取了 Quantity 和 UnitPrice，但计算字段 TotalCost 仍显示为 null，并且当我更改其他两个参数时，该值不会改变。这是我修改后的代码，所以有人可以看看。我正在使用相同的剃须刀代码，只是更改了 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));
    });

Answer 1

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

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));

Answer 2

这个：

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));