将 Knockout Observable 作为参数传递给 JavaScript 函数？

Question

我的 Knockoutjs 代码如下：

function chainModel(){
        var self = this;
        this.total_count = ko.observable();

        function get_total_count(number){
            $.ajax({
                type : "get",
                url : "./XYZ/abc.php",
                cache : false,
                data : {number: number},
                success : function(result){
                    self.total_count($.parseJSON(result));
                },
                error : function(jqXHR, textStatus, errorThrown){
                    console.log("Error ! Unable to get step " + $number + " count." + "Error: " + errorThrown + ", Status: " + textStatus);
                }
            });
        }
    }

    ko.applyBindings(new chainModel());

在 get_total_count() 函数中，我将 ajax 结果分配给 self.total_count observable。相反，我也想将 observable 作为参数传递给 get_total_count() 函数，以便我可以为多个 observable 重用相同的函数。

Answer 1

这是一种不同的方法，它使用 jQuery Ajax 调用的 promise 语义。花几分钟时间熟悉jQuery Deferreds如果这个概念对你来说是新的，那么它是值得的。

快速说明：根据广泛采用的约定，构造函数名称PascalCase和所有其他名称都camelCase在 JavaScript 中。不要使用underscore_separated标识符（没有其他人使用）。

function ChainModel() {
    var self = this;

    self.totalCount = ko.observable();
    self.otherCount = ko.observable();

    function getCount(number) {
        return $.get("./XYZ/abc.php", {number: number})
        .fail(function (jqXHR, textStatus, errorThrown) {
            console.error(
                "Error ! Unable to get step " + number + " count." + 
                "Error: " + errorThrown + ", Status: " + textStatus
            );
        });
    }

    getCount(1).done(self.totalCount);
    getCount(2).done(self.otherCount);
}

ko.applyBindings(new ChainModel());

由于knockout observables 实际上是函数并且调用它们会设置它们的值，因此您可以直接将它们用作Ajax 调用中的成功回调。

通过返回jqXHR对象从getCount()，您可以访问它公开承诺的功能。因此，而不是通过在目标观察的到 getCount()，你可以把它的.done()回调，从而分配Ajax调用它的结果。实际上，这是关注点分离并使您的代码更加灵活。

其他注意事项：

• 您不应该强制cache: false执行 Ajax 调用。Cache-Control在服务器端设置适当的标头，浏览器不会缓存调用。
• jQuery 会自动为您解析响应，$.parseJSON()无需手动调用。