jquery - Backbone Marionette Region + Layout + View hierarchy and responsiveness -

jquery - Backbone Marionette Region + Layout + View hierarchy and responsiveness -

i writing first marionette app , utilize marionette ui structure.

my understanding that, speaking,

a region 1:1 existing, single dom node (like div or span) , may contain views, including special ones provided marionette a layout view container of regions , specifies template regions arranged; view may rendered region

so think means must follow sort of hierarchy:

- root (region) [could more one] -- layout --- inner part a1 --- inner part a2 -- layout b --- inner part b1 --- inner part b2 -- view c --- maybe subviews?

if assumptions wrong, please correct.

in case, application has navigation , content area in ui. now, when script loaded, may loading page has div#region-navigation in place customize appearance, or may loading page without node in place. if navigation node in place, don't need render it, need able maintain reference , things ("log in" => "log out" instance). on other hand, if not in place, need render , maintain it.

my question is: "marionette" way handle this? have thought of 1 way, avoid going downwards unnecessarily painful paths.

my solution create absolute rootregion single selector (default body) not exist @ time of creation.

i have 2 applayouts: injectedapplayout, layout has content region, , managedapplayout, layout replaces contents of body.

then based on script tag data- params and/or on page (using jquery) can take layout use.

in either case, have headerregion , contentregion. in case of injectedapplayout headerregion lives outside while managedapplayout contains both. then, perchance need create separate externalheaderregion , internalheaderregion or utilize conditional because need handle things differently depending on whether beingness managed me or not.

this seems sub-optimal haven't found illustration of how people manage this.

finally, in case of injectedapplayout, afraid div containing contentlayout may little if screen width big because not command it. styles, using bootstrap , media queries, utilize max-width values determine styles set. question is: @media (max-width: xxxpx) queries still apply containing div in case of injected app layout?

i've used next structure

-marionette application (root - have regions hash of existing node elements) -- layoutview (breaks application part in sub regions if needed) ---collectionview || compositeview (render collections) ----itemview || ---layoutview (create more sub-regions) ---- (other sub views) || ---itemview (render model)

+router , controllers application statuses maintain

lets separate responses between stuff

application - starts first. in charge of keeping constants , global params, start , stop sub modules load default routers , controllers + provide request/response channel.

1) can receive params on start

var options = { something: "some value", another: "#some-selector" }; myapp.start(options);

2) have regions has work existing nodes (navs, content, footer, sidebars , on)

myapp.addregions({ someregion: "#some-div", anotherregion: "#another-div" });

so can provide params js render right views + can hook-up application node elements

router , controller

helps render right view according application status. in charge of keeping application view right according url , provide navigation can utilize links + navigate manually navigate method

var myrouter = new marionette.approuter({ controller: mycontroller, approutes: { "foo": "dofoo", "bar/:id": "dobar" } });

layoutview in charge of rendering , closing subviews. separate parent node in child

backbone.marionette.layoutview.extend({ template: "#layout-view-template", regions: { menu: "#menu", content: "#content" } });

using construction can pass application params allow application know if user loged in or not. according can add together regions addregions , render layouts (like 'usernav' or 'guestnav') . layout render kid views userlinks, useravatar , on. user click links router , controller handle , tell application render in region.

jquery css backbone.js marionette