general backbone/marionette program structure <p>I need some general guidelines on how to structure a backbone/marionette application. Im very new to these frameworks and also to js in general.</p> <p>Basically I have two pages and each page has a list. I have set up an application and a router for the application:</p> <pre><code>var app = new Backbone.Marionette.Application(); app.module('Router', function(module, App, Backbone, Marionette, $, _){ module.AppLayoutView = Marionette.Layout.extend({ tagName: 'div', id: 'AppLayoutView', template: 'layout.html', regions: { 'contentRegion' : '.main' }, initialize: function() { this.initRouter(); }, ... }); module.addInitializer(function() { var layout = new module.AppLayoutView(); app.appRegion.show(layout); }); }); </code></pre> <p>In the initRouter I have two functions, one for each page that gets called by router depending on the url.</p> <p>The function for the content management page looks like this:</p> <pre><code>onCMNavigated: function(id) { var cMModule = App.module("com"); var cM = new cMModule.ContentManagement({id: id, region: this.contentRegion}); contentManagement.show(); this.$el.find('.nav-item.active').removeClass('active'); this.cM.addClass('active'); } </code></pre> <p>So if this is called, I create a new instance of ContentManagement model. In this model, when show() is called, I fetch the data from a rest api, and I parse out an array of banners that need to be shown in a list view. Is that ok? The model looks like the following:</p> <pre><code>cm.ContentManagement = Backbone.Model.extend({ initialize: function (options) { this.id = options.id; this.region = options.region; }, show: function() { var dSPage = new DSPage({id: this.id}); dSPage.bind('change', function (model, response) { var view = new cm.ContentManagementLayoutView(); this.region.show(view); }, this); dSPage.fetch({ success: function(model, response) { // Parse list of banners and for each create a banner model } } }); cm.ContentManagementLayoutView = Marionette.Layout.extend({ tagName: 'div', id: 'CMLayoutView', className: 'contentLayout', template: 'contentmanagement.html', regions: { 'contentRegion' : '#banner-list' } }); </code></pre> <p>Now my biggest doubt is how do I go on from here to show the banner list? I have created a collectionview and item view for the banner list, but is this program structure correct?</p>