如何使用q.js链接骨干模型?

时间:2014-02-26 02:01:37

标签: javascript backbone.js promise q

我有以下内容:

var q = new app.models.OverwriteLineItemsProcess();
q.set('id', $("#process_id").val());
q.saveSource($("#source_quote").val());
q.lockSource();

saveSource正在使用ajax将数据发送到后端。 lockSource也是如此。

我想以这种顺序方式执行:saveSource>> lockSource。

如何编写q.js以使其正常工作?

q.js是指https://github.com/kriskowal/q

更新:添加了saveSource和lockSource

saveSource: function (quotation_id) {;
        var type = "PUT";
        var verb = "Updated";
        var headers = {
             'X-HTTP-Method-Override': type
        };

        var url = app.base_url + "/overwrite_line_items/" + this.id;
        this.set('source_quote', quotation_id);
        var data = this.toFormData();
        var result = false;
        var currentModel = this;
        var settings = {
            headers: headers,
            type: type,
            url: url,
            data: data,
            success: function(json) {
                response = JSON && JSON.parse(json) || $.parseJSON(json);
                console.log(response);
                currentModel.lockSource();
                $("#facebox-source-quote-status").html('<font color="green">SELECTED</font>');
            },
            error: function(response) {
                $("#facebox-source-quote-status").html('<font color="red">UNABLE TO SELECT</font>');
            },
            dataType: 'json'
        };
        $.ajax(settings).done(function() {
        });
    },

    lockSource: function () {
        var type = "PUT";
        var verb = "Updated";
        var headers = {
             'X-HTTP-Method-Override': type
        };

        var url = app.base_url + "/quotations/is_editable/" + this.attributes.source_quote;

        var data = this.toFormData();
        var result = false;
        var currentModel = this;
        var settings = {
            headers: headers,
            type: type,
            url: url,
            data: data,
            success: function(response) {
                console.log(response);
            },
            error: function(response) {
                $("#facebox-source-quote-status").html('<font color="red">UNABLE TO SELECT</font>');
            },
            dataType: 'json'
        };
        $.ajax(settings).done(function() {
        });
    },

1 个答案:

答案 0 :(得分:1)

您正在使用的jQuery.ajax函数已返回其结果的承诺。你只需要从你的函数中返回它:

saveSource: function (quotation_id) {;
    …
    var settings = {
        headers: headers,
        type: type,
        dataType: 'json', // jQuery will automatically parse it for you
        url: url,
        data: data
    };
    return $.ajax(settings).done(function() {
//  ^^^^^^
        $("#facebox-source-quote-status").html('<font color="green">SELECTED</font>');
        // notice I did remove the currentModel.lockSource(); call from the callback
    }, function() {
        $("#facebox-source-quote-status").html('<font color="red">UNABLE TO SELECT</font>');
    });
},
lockSource: function () {
    …
    var settings = // analoguous, no callbacks here
    return $.ajax(settings).fail(function(response) {
        $("#facebox-source-quote-status").html('<font color="red">UNABLE TO SELECT</font>');
    });
}

现在您可以轻松地将它们链接起来:

var q = new app.models.OverwriteLineItemsProcess();
q.set('id', $("#process_id").val());
q.saveSource($("#source_quote").val()).then(function(saveResponse) {
    console.log(saveResponse);
    return q.lockSource();
}).done(function(lockResponse) {
    console.log(lockResponse);
});

你甚至不需要Q。如果您想使用它,请在$.ajax()调用中包含Q()次调用,如Converting JQuery Promises to Q section of the docs中所述。