Netbeans navigator does not show my JavaScript Class methods

Question

Some background, skip to the 2nd paragraph to get to the question. I have tried quite a few editors like your typical developer and still my all-time favorite was Homesite/ColdFusion Studio before it was sucked into Dreamweaver and I trust most of you will agree with me that well, yea.. Dreamweaver. Anyway, I've been running Sublime Text 2 and it's ok but I feel I need more of an IDE than a text editor. To that end I have been using NetBeans for a few months. I'm starting to love it. At home I use a Mac with TextMate and Coda but I wouldn't mind moving to NetBeans completely however there are a few issues that bother me. Most notably its XSL editing is annoying for a few reasons and then secondly this JavaScript issue I've been having.

I like the ability to jump around a JavaScript file using ctrl+click on methods and such, alt+back to move back and being able to see the outline of your methods and classes in the navigator. However my issue is that in my Javascript files NetBeans doesn't seem to be able to figure out my class and its methods. I use a pattern for writing my singleton classes that has proved indispensable for me. I write such classes as follows:

// create class to contain code for this page
var FieldMgmt = function() {

    // vars local to the class
    var Fields = {}; // Store the form fields of the class

    return {

        // startup method
        init: function() {
            // initialize properties
            console.log('field management intialized');

            // capture the fields
            this.Fields = Fields = {
                field1: $('select[name=field1]') // field One
                ,field2: $('select[name=field2]') // field Two
                ,field3: $('select[name=field3]') // field Three
            };

            this.initEvents(); // setup events

        }

        // initialize events
        ,initEvents: function(){

        }


        // method 1
        ,method1: function(arg1, arg2){

        }

        // method 2
        ,method2: function(arg1, arg2){

        }

    }; // end return of FieldMgmt

}(); // end FieldMgmt

// start the code for this page
$(document).ready( function(doc){ FieldMgmt.init(); } );

And below is a picture of what shows up in my navigator for this file:

As you can see, none of my methods show up in the navigator such as initEvents, method1, method2, etc. ctrl+click-ing a method call as well doesn't go to the method declaration. So NetBeans just doesn't know this is a class. I've had similar problems with this pattern before in other editors, for instance NotePad++ and I was able to get the editor to figure out my file by modifying the regular expressions used to parse the file.

I can survive without this feature but if I could get this to work then this would be my editor of choice as these files can get rather large and being able to see all the methods and jump around the file quickly by ctrl+click-ing, etc. would be fantastic.

I'm using NetBeans 7.3 with everything updated to the latest as of today on Windows Server 2003. Any help would be greatly appreciated. Is there anyway for me to modify NetBeans in order for it to be aware of my methods? Are there plugins for this? Thanks in advance.

Answer 1

In your example code you return a closure that keeps a variable named Fields as "private" but the first thing you do in init is expose it publicly by declaring this.Fields=Fields. With the example code posted you might as well declare FieldMgmt as an object literal and have NetBeans recognize it to have it's properties show up in the Navigator.

var FieldMgmt = {
    init: function() {
    }
    ,initEvents: function(){
    }
    ,method1: function(arg1, arg2){
    }
    ,method2: function(arg1, arg2){
    }
};

Answer 2

Thanks to @HMR for his answer. It put me on the right path. I'm posting this now so that others using the style of coding I mentioned can have an example of how to modify theirs to show up in the navigator without changing how it behaves or losing the advantages of structuring your code this way. So the final outcome looks like this:

// create class to contain code for this page    
var FieldMgmt;

    (function(){

        // vars local to this closure
        var Fields = {}; // Store the form fields of the class

        FieldMgmt = {

            // startup method
            init: function() {
                // initialize properties
                console.log('field management intialized');

                // capture the fields
                this.Fields = Fields = {
                    field1: $('select[name=field1]') // field One
                    ,field2: $('select[name=field2]') // field Two
                    ,field3: $('select[name=field3]') // field Three
                };

                this.initEvents(); // setup events

            }

            // initialize events
            ,initEvents: function(){
            }


            // method 1
            ,method1: function(arg1, arg2){

            }

            // method 2
            ,method2: function(arg1, arg2){

            }

        }; // end FieldMgmt

    })(); // end closure

    // start the code for this page
    $(document).ready( function(doc){ FieldMgmt.init(); } );

And the navigator now shows the methods and properties:

Hope that helps.

Answer 3

It works in the current version of Netbeans 8.1.