javascript - Changing the "page" in MarionetteJS -

javascript - Changing the "page" in MarionetteJS -

i'm working on big scale backbone application (using marionettejs) , having architecture troubles best practices/patterns involved in switching views or changing "page".

marionette's layouts & regions provide great tools doing view switching, such .show() , .empty() methods. in application working on, i've used layout view container of other views, , allows me switch views in , out, navigating within app.

thats easy. hard part me understanding best practices triggering changes.

here of solutions i've come with:

a page:change:x event fired when user clicks part of ui (x beingness view alter to). controller manages view listens event , shows in apps main layout view.

when user clicks ui alter page, view triggers command, , passes in view ui alter to, app.execute('page:change', view). application object listens that trigger, , shows view passed apps main layout view.

the problem first method controller has know every page in scope (maybe thats not bad thing, don't know). example: users-list-view, users-edit-view, users-profile-view etc etc. makes code harder maintain track of since there events beingness triggered on place.

the issue sec method current view has know view application alter too, doesn't seem scalable me.

is there best practice doing kind of thing?

edit:

i should clarify problem associated navigating around within application. not initial load using router.

faced close issue few times, solution following

1) main - script in html page, loads app + router + controller 1) application - define root regions, starts history, 2) approuter - watch url match , phone call controllers actions 3) appcontroller - keeps actions hash, hook events subscribe (like app:switchpage) own actions, manage models , views.

in code (i utilize requirejs loading on demand):

main.js

define( [ 'application', 'approuter', 'appcontroller' ], function(application, router, controller) { var app = new application; app.addinitializer(function() { this.controller = app.controller; this.router = app.router({ controller: this.controller }) }) } );

application

define( [ 'marionette', 'backbone' ], function(marionette, backbone) { homecoming marionette.application.extend({ regions: { 'main': '#body' }, onstart: function() { backbone.history.start() } }) } );

approuter

define( [ 'application' ], function(application) { application.module('approuter', function(module, app, backbone, marionette) { app.router = marionette.approuter.extend({ //for illustration : page/home page/goods page/user approuter: { 'page/*': 'switchpage' } }) }) } );

appcontroller

define( [ 'marionette' ], function(marionette) { application.module('approuter', function(module, app, backbone, marionette) { app.controller = marionette.controller.extend({ switchpage: function(path) { //path (user || home || some) require(['views/'+path], function(pageview) { app.main.show(new pageview) }) } }) }) } );

pages/home

define( [ 'marionette', 'underscore' ], function(marionette, _) { homecoming marionette.itemview.extend({ template: _.template("home page") }) } );

its mockup, i've removed parts of code maintain thought of application. create more scalable may define pages modules own controls , deps.

nightly recommend checkout brian mann screencast @ http://www.backbonerails.com/, engineering rich, single page apps , checkout david sulc github project example

javascript backbone.js marionette large-scale