CODEWITHSUNDEEP
javascriptbackbone.jsrequirejsmarionette
Captain Obvious
Captain Obvious

Reputation: 785

circular reference marionette.js

I'm having a problem with a circular reference in my marionette.js application..

The problem is:

App.js creates the router with an controller, and that controller requires the app.js again so it can add the views to the regions.. As you can see below (the controller) when i print the Application it returns undefined because of the circulare reference..

controller.js:

define(
['app', 'views/ProjectItemView'],
function (Application, ProjectItemView)
{
    'use strict';
            console.log(Application); // undefined

    return Marionette.Controller.extend({
        showProjects : function()
        {
            Application.main.show(new ProjectItemView());
            console.log('project');
        }
    });
}
);

router.js:

   define
    (
        ['marionette'],
        function(Marionette)
        {
            'use strict';

            return Marionette.AppRouter.extend
            (
                {
                    appRoutes:
                    {
                        'dashboard/projects' : 'showProjects'
                    }
                }
            );
        }
    );

app.js

define
(
    [
        'backbone', 'marionette', 'jquery', 'routers/DashboardRouter', 'controllers/DashboardController',
        'views/dashboard/Header'
    ],
    function(Backbone, Marionette, $, DashboardRouter, DashboardController, Header)
    {
        'use strict';

        var app = new Marionette.Application();

        app.addRegions({
            header: '#header',
            main: '#main',
        });

        app.header.show(new Header());

        app.on('initialize:after', function () {
            Backbone.history.start({pushState: true});
            app.router = new DashboardRouter({
                controller : DashboardController
            });
        });

        $(document).on("click", "a[href^='/']", function(event)
        {
            var href = $(event.currentTarget).attr('href');
            console.log(href);

            event.preventDefault();
            app.router.navigate(href, {trigger: true});
            return false;
        });

        return app;
    }
);

Now what is the best way to solve this problem? I'm totally new to this so i don't really know what the best practice is..

Also is it correct that I add the views in my controller? Or should i do that somewhere else?

Thanks in advance

Upvotes: 4

Views: 744

Answers (3)

Ming Chan
Ming Chan

Reputation: 1948

If I understand you correctly, essentially, you have Router depends on App and Controller depends on App.

If that is the case, you just break them into three modules, App, Router, and Controller. Then define ['app',...] in both Router and Controller modules. Here is some other basic code structure that I used for JMQ.

Updated: From Using-marionette-with-requirejs, it also discusses about "Avoiding Circular Dependencies"

Upvotes: 1

Ian Lim
Ian Lim

Reputation: 4274

You can put the ProjectView into a Marionette Module.

Please refer to https://github.com/mallim/backbone_examples/blob/master/app/scripts/cats/module.js for an example of such technqiue.

Hope this helps.

Upvotes: 0

Rayweb_on
Rayweb_on

Reputation: 3727

I think you should pass a region to the controller at the time to instanciate it, you definitly need to move your code. I have a sample application working but not with require, however the concept of creating a region in the controller and passing a region from the main app to it can be demostraded here.

 App.addInitializer(function () {
    var controller = new BookStoreController({region: App.mainRegion});
    layout = new CatalogLayout();
    controller.region.show(layout);
    var router = new Router({controller:controller});
});

http://jsfiddle.net/rayweb_on/hsrv7/11/

Hope that helps.

Upvotes: 4

Related Questions