Question

 var Foo = Foo || {};

Foo.Controller = (function ($) {
    var $page = $("#bar");
    var init = function () {
            console.log($page); // outputs: []
            console.log($.isEmptyObject($page)); // outputs: false
        }
    var public = {
        init: init
    }
    return public;
})(jQuery);
$("#FooPage").bind("pageinit", function () {
    Foo.Controller.init();
});

Why does $page not seem to be assigned its value?
I am using JQuery Mobile and the pageinit is the mobile equivalent of document ready.

Answer 1

$page is not assigned on pageinit, it is assigned immediately. Try this:

var init = function () {
    console.log($page); // outputs: []
    console.log($('#bar'); // TELL US IF THIS LOGS THE RIGHT THING!
    console.log($.isEmptyObject($page)); // outputs: false
};

EDIT (Esailija pointed out another issue):

Esailija has much better eyes than I. Foo.Controller is set to the result of the IIFE. Since that function doesn’t return anything, it is set to undefined. Maybe you want to return an object that has your init function? In that case, you can avoid the entire problem by setting $page inside of init.

var Foo = Foo || {};

Foo.Controller = (function($) {
    var init = function () {
        var $page = $("#bar");
        console.log($page); // outputs: []  <-- not anymore (if #bar is really on the page)
        console.log($.isEmptyObject($page)); // outputs: false
    };
    return {init:init};
})(jQuery);
$("#FooPage").bind("pageinit", function () {
    Foo.Controller.init();
});