using Backbone JS boilerplate & code navigation

Question

a newbe question: I've downloaded the backbone boilerplate from https://github.com/david0178418/BackboneJS-AMD-Boilerplate it uses require.js and I wonder about the code navigation during development.

Here is my question: let's say I have 2 views one extend the other like so:

View 1:

define([
    'underscoreLoader',
    'backboneLoader',
    'text!templates/main.html'
],
    function (_, Backbone, MainTemplate) {
        "use strict";

        return Backbone.View.extend({
            template:_.template(MainTemplate),

            initialize:function () {
                this.render();
            },

            log:function(msg){
                console.log(msg);
            },

            render:function () {
                this.$el.append(this.template({}));
                return this;
            }
        });
    }
);

View 2:

define([
    'underscoreLoader',
    'backboneLoader',
    'text!templates/other.html',
    'views/main-view'
],
    function (_, Backbone, MainTemplate,MainView) {
        "use strict";

        // how would you navigate to MainView (main-view.js) 

        return MainView.extend({
            template:_.template(MainTemplate),

            initialize:function () {
                this.render();
            },

            render:function () {
                this.log("my message");
                this.$el.append(this.template({}));
                return this;
            }
        });
    }
);

Now when I develop (I use IntelliJ) I would like to middle click MainView on the extended view and navigate to the code without having to browse the project tree.

Is that possible using this boilerplate? is there a better approach or a better boilerplate?

Answer 1

I found this to work fine for me: the Backbone Objects are wrapped with my custom objects, which allows me to navigate code, extend objects and keep multiple files easily.

Here is how:

Object 1

function ItemModel() {
    ItemModel.model = (
        Backbone.Model.extend({
            initialize:function () {

            },
            defaults:{
                name:"item name"
            },
            log:function(){
                console.log("inherited method");
            }
        })
        );
    return new ItemModel.model();
}

Object 2

function ItemModel2() {
    ItemModel2.model = (
        ItemModel.model.extend({
            initialize:function () {

            },
            defaults:{
                name:"item name2"
            }
        })
        );
    return new ItemModel2.model();
}

and in my app:

var App = {
    item:new ItemModel(),
    item2:new ItemModel2()
};

Answer 2

I would really like Netbeans's navigator to show me all the methods:

var New_Controller = Backbone.View.extend({
    el : null, ...
}

But I can't seem to get it to work. Google came up with something for @lends, but I can't even get Backbone.js to get loaded to the code hint cache.

I ended up installing WebStorm (I saw the IDE in all the egghead.io tutorials) to get the navigator to list all methods and properties.

FYI, Aptana Studio and Zend Studio showed nothing like Netbeans. And Eclipse IDE for JavaScript Web Developers only partially (impractical in real life) works; it flattens the entire hierarchy.