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
view
s, including special ones provided
marionette
a
layout
view
container of
region
s , 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 applayout
s: 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