Question

I am unable to call this.RenderDeals() from inside my Post.success function. I assume this has something to do with scope? Could someone shed some light on the issue, and possibly suggest a workaround. I have tried using prototype and module pattern, both without any luck.

FYI Post is an $.ajax wrapper that returns a jQuery Deferred object.

    function Deals() {
        this.template = '#trTemplate';
        this.container = '#containerTable';
        this.GetDeals = function () {
            Post('Deal.svc/GetDeals')
            .success(function (result) {
                this.RenderDeals(result);
            });
        };
        this.RenderDeals = function (deals) {
            $(this.template).tmpl(deals).appendTo(this.container);
        }
    }


    var deal = new Deals();
    deal.GetDeals();

UPDATE:

Ok, so I added the following line just above the GetDeals function:

var me = this;

and instead call

me.RenderDeals(result);

Appears to work correctly, but I’m not sure why.

Answer 1

The this reference in your “success” function almost certainly isn’t what you think it is. Try this change:

function Deals() {
    var instance = this;

    this.template = '#trTemplate';
    this.container = '#containerTable';
    this.GetDeals = function () {
        Post('Deal.svc/GetDeals')
        .success(function (result) {
            instance.RenderDeals(result);
        });
    };
    this.RenderDeals = function (deals) {
        $(this.template).tmpl(deals).appendTo(this.container);
    }
}

By stashing a reference to this in the “instance” variable, your handler will have a guaranteed way of getting back to the relevant instance when calling the other function (“RenderDeals”).