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，所有其他名称在JavaScript中为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调用中的成功回调。

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

其他说明：

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

Answer 2

它不像将observable作为参数传递一样简单吗？

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

    get_total_count(this.total_count, this.number);

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

ko.applyBindings(new chainModel());

Answer 3

您是通过任何事件绑定调用此方法“get_total_count（）”吗？如果是这样，那么您可以将整个数据视图模型传递给此方法。

<input data-bind="event:{ click: function(data,event){ get_total_count(data,event,total_count()); } }" />

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

3 个答案: