Circular link marionette.js

Question

I have a circular link problem in marionette.js app.

The problem is this:

App.js creates a router with a controller, and that controller again requires app.js so that it can add views to regions. As you can see below (controller), when I type Application , it returns undefined due to the circulare link ..

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 am completely new to this, so I don’t know what is the best practice.

Is it also true that I am adding views to my controller? Or should I do it somewhere else?

Thank you in advance

Answer 1

I think you should pass the region to the controller at the time, in order to initiate it, you definitely need to move your code. I have an example of an application that works, but does not require, however, the concept of creating a region in the controller and transferring the region from the main application to it can be presented 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 this helps.

Answer 2

If I understand you correctly, in fact, you have a Router dependent on the App and Controller dependent on the application.

If so, you simply break them down into three modules: App, Router, and Controller. Then define ['app', ...] in the Router and Controller modules. Here is another basic code structure that I used for JMQ.

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

Answer 3

You can put ProjectView in the Marionette module.

See https://github.com/mallim/backbone_examples/blob/master/app/scripts/cats/module.js for an example of such a technikiue.

Hope this helps.