JSLink - javascript error: "ctx is undefined"

I've been following some blogs to learn how to use the JSLink to modify list views. In almost every blog post it's listed like this:

(function () {

    var overrideCtx = {};
    overrideCtx.Templates = {};

    overrideCtx.Templates.Header = "<B><#=ctx.ListTitle#></B><hr><ul>";
    overrideCtx.Templates.Footer = "</ul>";

    overrideCtx.Templates.Item = CustomItem;
    overrideCtx.BaseViewID = 1;
    overrideCtx.ListTemplateType = 100;

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

})();


function CustomItem(ctx) {
    var ret = "<li>This is a " + ctx.CurrentItem.MoreText + "</li>";
    return ret;
}

If i leave out the call to CustomItem and change the overrideCtx.Templates.Header to just text (ie: overrideCtx.Templates.Header = "<ul>";) it works, and it modifies my view. If i call the CustomItem function, or try to use the ctx.ListTitle (or any other ctx. method) I get an error in the js console saying "ctx is undefined". Am i missing something? why can't i access this object? I don't see it being mentioned or declared in any of the posts regarding this so i'm at a loss.