"object is not a function" 在 Knockout JS 中尝试通过调用 Web API 获取值时出错

Question

我正在使用 KnockoutJS 创建一个在线工具。在视图模型中有一个计算的属性调用 WebAPI 来获取远程计算值，我的方法是尝试通过 jquery 调用 WebAPI。ajax 调用，如代码片段所示以下

它在我尝试声明将位于同一视图模型中的参数传输到 WebAPI 的位置生成 "object is not a function" 错误。

请告诉我正确的方法，谢谢

<input id="interestRate" type="text" data-bind="value: interestRate" />
<input id="amountBeingWithdrawn" type="text" data-bind="value: amountBeingWithdrawn" />
<strong id="calculatedFee" data-bind="text: calculateResult().CalculatedFee"></strong>
<strong id="adminFee" data-bind="text: calculateResult().Interest"></strong>

    var apiUrl = "/api/Calculator"

    var calculatorModel = function () {

        this.interestRate = ko.observable(7.5);
        this.amountBeingWithdrawn = ko.observable(10000);

        this.calculateResult = ko.computed(function () {
            return $.ajax({
                url: apiUrl,
                type: 'GET',
                dataType: 'json',
                data: {
                    InterestRateContracted: this.interestRate(), //ERROR: Uncaught TypeError: object is not a function
                    AmountBeingWithdrawn: this.amountBeingWithdrawn() //ERROR: Uncaught TypeError: object is not a function
                },
                success: function (result) {
                    return {
                        Fee: result.CalculatedFee,
                        Interest: result.Interest
                    };
                }
            });
        }).extend({ async: true });

    }

    var calculator = new calculatorModel();

    $(document).ready(function () {
        ko.applyBindings(calculator);
    });

Answer 1

问题是 this 在计算中是不同的东西，因为你没有告诉它是特定的东西。你有两个选择。首先，在外部对象上保留对 this 的引用，并在计算中使用它：

var calculatorModel = function () {
    //keep a reference to the original "this" hanging around
    var self = this;
    this.interestRate = ko.observable(7.5);
    this.amountBeingWithdrawn = ko.observable(10000);

    this.calculateResult = ko.computed(function () {
        return $.ajax({
            url: apiUrl,
            type: 'GET',
            dataType: 'json',
            data: {
                //Here we use the self variable, which will still be referencing
                //the correct object
                InterestRateContracted: self.interestRate(), 
                AmountBeingWithdrawn: self.amountBeingWithdrawn()
            },
            success: function (result) {
                return {
                    Fee: result.CalculatedFee,
                    Interest: result.Interest
                };
            }
        });
    }).extend({ async: true });
}

或者其次，利用敲除可以 manage this for you:

this.calculateResult = ko.computed(function () {
    return $.ajax({
        url: apiUrl,
        type: 'GET',
        dataType: 'json',
        data: {
            InterestRateContracted: this.interestRate(),
            AmountBeingWithdrawn: this.amountBeingWithdrawn()
        },
        success: function (result) {
            return {
                Fee: result.CalculatedFee,
                Interest: result.Interest
            };
        }
    });
}, this).extend({ async: true });
//Note the addition of the this parameter to the computed 
//observable on the above line

"object is not a function" 在 Knockout JS 中尝试通过调用 Web API 获取值时出错

"object is not a function" error when try to get value by calling WebAPI in KonckoutJS

knockout.js