Question

I have two backbone Views. One is the main view and the other is a view that will be used within the main view. I am making individual modules for my various views. I have the main view being loaded and run fine from the router. Here are my two views:

MAIN VIEW:

 define([
    'jquery',
    'backbone',
    'metros/docsMetro'
], 
function($, Backbone, docsMetro) {
    //Main Dashboard View
    var Dashboard = Backbone.View.extend({
            el: $('#mainContent'),
            events: {

            },


            initialize: function() {
                console.log('test');
                //Validate User Here most likely.  Each of the main view's for each app should probably call the same validation function


            },

            render: function (){
                console.log('testing render');

            }

        });


    // Return the Main Dashboard View
    return new Dashboard;

The ‘metros/docsMetro’ file that is being loaded with require there in the top. I can see that this view is loading and is running through the init.

define([
    'jquery',
    'backbone'
], 
function($, Backbone) {
    //Docs Metro View
    var docsMetro = Backbone.View.extend({
            el: $('.docs'),
            events: {},

            initialize: function() {
                console.log('docs Metro');

            },

            render: function (){
                console.log('redering docs');

            }

        });

    // Return the View
    return new docsMetro;
});

My issue is in the Main View the ‘docsMetro’ variable that should be the returned docsMetro view is coming back null.

What am I missing, seems like it is all setup correctly?

Answer 1

can you try setting paths to modules to be relative?

instead of doing 'metros/docsMetro' do './metros/docsMetro' (assuming metros folder is on the same level as the module file from which you require metros/docsMetro)

And few other tips and fixes for your code.

Modules should return constructors rather then instances and you should instantiate them in the initializers for views that are requiring them.

jQuery and Backbone aren’t going to drop support for global registering of their namespace so you don’t need to pass them every time to the dependencies array. It’s enough if you require them once in the boostrap before you load your router and main view which will take care of loading the rest of the app