javascriptjqueryclosuresrevealing-module-patternself-executing-function

How do you use the revealing module pattern with jQuery's document.ready?


I have the following (albeit) small 'revealing module pattern' implementing code:

(function (CkSpace, $, undefined) {

    CkSpace.GetLoanValues = function () {
        var url = "/Home/UpdateAPR";

        $.get(url, { Amount: $("#slider").slider("value"), Length: $("#slider2").slider("value") }, function (data) {
            $("#LoanAmount").html("£"+data.LoanAdvance);
            $("#TotalToRepay").html("£" + data.LoanGrossRepayable);
            $("#Representative").html(data.LoanAPR);
            $("#MonthlyRepayTerm").html(data.LoanTerm);
            $("#MonthlyFee").html("£" + data.LoanInstalment);
        });
    }

} (window.CkSpace = window.CkSpace || {}, jQuery));

I was under the impression that by using window.CkSpace I would be able to access CkSpace globally as a root namespace for any of its public members. However, when I used this in conjunction with $(document).ready() I was unable to access my CkSpace namespace unless I declared it within $(document).ready().

Could someone explain to me the scoping issue here and if there is anyway to avoid declaring it inside my $(document).ready() function?

EDIT: I was being a bit forgetful it seems and I wasn't prefixing CkSpace with window when accessing it within the scope of $(document).ready()


Solution

  • Ben,

    If I have understood your concern, This code snippet might help you.

    window.CkSpace = {};
    
    (function (CkSpace) {
    
        CkSpace.getLoanValues = function () {
           alert('I provide loans');
        }
    
    } (window.CkSpace || {}, jQuery));
    
    window.CkSpace.getLoanValues();
    

    Fiddle: http://jsfiddle.net/GDcVt/

    If not can you please make it more minimal as the internal code has no relevance with scope. I am not sure whether the objcet does exist in the window scope before you pass it to the function.