CODEWITHSUNDEEP
javascriptjqueryclosures
Drew
Drew

Reputation: 1777

Variables not available in closure

I'm having trouble assigning some variables as within a closure scope of a javascript class/jQuery plugin.

When I move into Article.initObj() as in the constructor of the Article class, I can't see either domElement or settings in my closure scope, but I can see me and testVar. This is confusing me quite a lot. Can anyone shed some light on what be might going on here?

EDIT: I've tried this in both firefox and chrome.

Here's my HTML:

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript" src="ArticleNav.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                // Init our Viomedia article graph
                var articleList = $("#entityList").children().ArticleNav();             
            });
        </script>
    </head>
    <body>
        <div id="leftPanel" class="vpanel">
            <div id="#search">
                <label for="searchField">Search </label>
                <input style="float: right;" name="searchField" id="searchField"/>
            </div>
            <div id="tree">
            </div>
        </div>
        <div id="rightPanel" class="vpanel">
            <div id="entityList" >
                <div class="article program" id="1">
                    <div class="title">The Simpsons</div>
                    <div class="article playlist" id="2">
                        <div class="title">Classic Episodes</div>
                        <div class="article episode" id="6">
                            <div class="title">Homer the Heretic</div>
                        </div>
                    </div>
                    <div class="article season" id="3">
                        <div class="title">Season 4</div>
                        <div class="article episode" id="4">
                            <div class="title">Kamp Krusty</div>
                        </div>
                        <div class="article episode" id="5">
                            <div class="title">A Streetcar Named Marge</div>
                        </div>
                        <div class="article episode" id="6">
                            <div class="title">Homer the Heretic</div>
                        </div>
                        <div class="article episode" id="7">
                            <div class="title">Lisa the Beauty Queen</div>
                        </div>
                    </div>
                </div>
                <div class="artist article" id="7">
                    <div class="title">Electric Light Orchestra</div>
                    <div class="article album" id="8">
                        <div class="title">The Essential Electric Light Orchestra</div>
                        <div class="article album" id="9">
                            <div class="title">Disc 1</div>
                            <div class="article track" id="10">
                                <div class="title">So Serious</div>
                            </div>
                        </div>
                        <div class="article album" id="11">
                            <div class="title">Disc 2</div>
                            <div class="article track" id="12">
                                <div class="title">Last Train to London</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="program article" id="13">
                    <div class="title">Archer</div>
                </div>
            </div>
        </div>
    </body>
</html>

Here's my jQuery plugin:

(function($){

    var Article = function (element, options)
    {
        var me = this;
        var testVar = "I can read this";
        var domElement = $(element);

        var settings = $.extend({}, options || {});

        this.initObj = function()
        {
            me.test();
        };

        this.test = function()
        {
            console.log(testVar);
        };

        this.initObj();
    };

    var construct = function(element) {
        var element = $(element);
        // If this element already has this plugin attached to it.
        if(element.data('Article')) {
            return;
        }

        var ArticlePlugin = new Article(element);
        element.data('Article', ArticlePlugin);
    };

    $.fn.ArticleNav = function(func) {

        return this.each(function()
        {
            switch (func) {
                default:
                    construct(this);
                    break;
            }
        });
    };

}( jQuery ));

Upvotes: 0

Views: 629

Answers (1)

jfriend00
jfriend00

Reputation: 707218

domElement is available from .initObj() from the parent closure scope. Did you actually try to use it or did you just not see it in the debugger?

If you are stepping through initObj() in the debugger, you won't see domElement as a local variable in the debugger because it is in a higher scope, but if you do an explicit watch on it, you will be able to see it. If you write code in initObj() that references it, it will work.

Same for settings.

Upvotes: 1

Related Questions