javascript - 将 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如果这个概念对您来说是新的，那是值得的。

快速说明:根据广泛采用的约定，在 JavaScript 中，构造函数名称是 PascalCase，所有其他名称都是 camelCase。不要使用 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 observable 实际上是函数并且调用它们会设置它们的值，因此您可以直接将它们用作 Ajax 调用中的成功回调。

通过返回 jqXHR object从 getCount()，您可以访问它公开的 promise 函数。因此，与其将目标可观察对象传递给 getCount()，不如将其传递给.done() 回调，从而分配结果Ajax 调用它。这实际上是关注点分离，使您的代码更加灵活。

其他说明:

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