Question

我有三个字段 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>

更新我根据下面的建议修改了我的代码，似乎从数据库中干净地拉出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));

Knockout JS Computed Observable在编辑记录上

2 个答案: