Knockout JS Computed Observable on edit record

Question

I have three fields 1. Quantity 2. Unit Price 3. Total Cost I am using knockout JS to calculate total cost in real time. This works fine when adding a new record. However when I edit the record, I want the quantity and unit price to be prepopulated by their value in the database when the page first loads. I have tried the code below which prepopulates the quantity and unit price but the Total Cost result does not update and appears as blank now. Here is the code

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

UPDATE I have modified my code per suggestions below and appear to be cleanly pulling the Quantity and UnitPrice from the database but the computed field TotalCost is still displaying null and when I change the other two parameters the value does not change. Here is my modified code so someone can take a look. I am using the same razor code just changed the 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

In your code, you're creating a function that accepts four arguments:

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

I don't know why four because in the code you posted you're only using the first two.

So if, you're expecting the first two values as arguments you should do this:

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

This:

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

Should be:

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

And this:

ko.applyBindings(ViewModel);

Should be:

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