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()
};