如何使用q.js链接主干模型？

Question

I have the following:

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

saveSource is sending data to the backend using ajax. So is lockSource .

I want to execute in this SEQUENTIAL manner: saveSource >> lockSource.

How do I write the q.js to make it work?

By q.js, I mean https://github.com/kriskowal/q

UPDATE: added saveSource and 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() {
        });
    },

Answer 1

The jQuery.ajax function which you're using already returns a promise for its result. You just need to return that from your functions:

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>');
    });
}

Now you can easily chain them:

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);
});

You don't even need Q for that. If you want to use it, wrap the $.ajax() calls in a Q() invocation, as explained in the Converting JQuery Promises to Q section of the docs .