jQuery为与AJAX一起使用的插件实现成功和错误回调

Question

I have written a small Jquery plugin that makes it easy for me to implement Facebook like "likes" on any item in my application. My only issue now is that I struggle to implement the success / error callback of my plugin.

$('.user-like').like({
    success: function(data, textStatus, jqXHR) {
        $(this).text('Liked');
    }
});

My issue with the above code is this line:

$(this).text('Liked');

I'm aware of what why the issue happens, I just can't find a good way to make it work like I want it. Let me explain how the script works and what my Goal is:

As you can see I'm passing the call along to the likeApi() function that executes an AJAX call. Further you see that I merge my Options with the defaults and that you can override the success and error callback of the AJAX object.

The issue is now that this in the above code is the scope of the AJAX call and not my original method. I want to allow the user to define his own success / error callback that depends on the result of the API call and allows me to do something based on the state if it was a success or failure so that I can change the like text for example. How can I do this?

(function ($) {

    $.likeApi = function (action, options) {
        if (action != 'like' && action != 'unlike') {
            return false;
        }
        var options = jQuery.extend({}, jQuery.likeApi.defaults, options);
        $.ajax({
            type: "POST",
            url: options.baseUrl + action + '.json',
            data: {
                data: {
                    Like: {
                        foreign_key: options.id,
                        model: options.model
                    }
                }
            },
            success: options.success,
            error: options.error,
            dataType: 'json'
        });
    };

    $.fn.like = function (options) {
        var scopedOptions = options;
        this.on('click', function(event) {
            event.preventDefault();
            $.likeApi('like', $.extend({}, scopedOptions,{
                'id': $(event.target).data('like-fk'),
                'model': $(event.target).data('like-model')
            }));
        });
        return this;
    };

    $.fn.unlike = function (options) {
        var scopedOptions = options;
        this.on('click', function(event) {
            event.preventDefault();
            var result = $.likeApi('unlike', $.extend({}, scopedOptions,{
                'id': $(event.target).data('like-fk'),
                'model': $(event.target).data('like-model')
            }));
            alert(result);
        });
        return this;
    };

    $.likeApi.defaults = {
        baseUrl: '/likes/likes/',
        action: null,
        model: null,
        id: null,
        error: function(jqXHR, textStatus, errorThrown) {
            alert(textStatus);
        },
        success: function(data, textStatus, jqXHR) {
            alert(textStatus);
        }
    };

}(jQuery));

Answer 1

Two options: you can maintain context by adding a variable that references the original this , or you can use jquery.proxy()

Option 1 : Maintain the context by adding a variable that references the original this like so:

(function ($) {
    $.likeApi = function (action, options) {
        var self = this;

Then you just call self whenever you are out of context.

If you want to keep self available externally, you can inject it using jquery extend. http://api.jquery.com/jquery.extend/

options.success = $.extend(options.sucesss, {el: self});

inside your ajax call

$('.user-like').like({
    success: function(data, textStatus, jqXHR) {
        $(data.el).text('Liked');
    }
});

Option 2 : Alternatively, you can use jQuery.proxy() http://api.jquery.com/jquery.proxy/

proxy can change the this context for you...