Marionette: get single instance of a layout view - backbone.js

I am creating an application which has multiple views. Each view has got a left sidebar region and a main content region.
I have added two regions in my layout -> leftSidebarRegion and mainContentRegion. Now for each of these views the left sidebar content remains the same, but the mainContentRegion keeps on changing. This change in mainContentRegion is event driven.
I want to know how can I access my layout instance [created once in main controller of my module] so that leftSidebarRegion is not reloaded and I only change mainContentRegion.
Additional information: I have different view files for populating leftSidebarRegion and mainContentRegion.

You can access the region from the layout object.
var layout = new Layout();
layout.mainContentRegion.show(new ViewYouWantToRender());

Related

Load several views in one page

I would like to print the content of several views of my couchDB database inside a page.
I have several listContainers in my page and each listContainers must print the content of one view.
To do that I added an "onDidLoad" event to my page which triggers several QueryViews (one QueryView per view).
I correctly binded the content of each ListContainer with its corresponding view.
My problem is that all the lists print the same content which is the content of the last loaded view. All the views seem to be loaded but only the last view loaded is taken into account.
Is it possible to have several QueryViews for one page and how can I load the content of different views inside one page ?
Yes, it is possible to have multiple Query view components in one Page. Use the Marker property to set a different value for each component. In the MobileComponent Source you will find all your views marked as myView#myMarker. Select corresponding view markers for your listContainers.

Handle Views in routing backbone js

What is the best way to switch to a different view when user navigates to a different url. In angular there is ng-view that takes care of this and inserts corresponding templates and in ember its all route based.
Is it better to just hide other views elements on routing using css or destroying other views and inserting current view?
EDIT
It would be great if someone could give an example how to re-render the view on navigating back to it again and restoring its previous state.
Eg.
if you have a check-box in a view that user can select to add some item to the cart , but in the middle he/she moves to some other url and then comes back, that check-box should be checked.
I would have a main content view with subviews and call remove on it, which is responsible for cleaning up any subviews too (calling remove on them first and going up the hierarchy tree). The concept of subviews doesn't come for free with backbone but isn't hard to implement. And finally attach a new content view.
This ensures you can cleanup and the browser is using a consistent amount of resources.
I would abstract this into some kind of layout view which has a content subview and a function like setContent(view) which handles the remove of any existing content view and the attach of the new one.
Personally I would have a router with sub routers in modules, e.g. a main router which finds a route starting with "checkout" and passes it over to a sub router in the checkout module which is responsible for attaching a new content view.
In Backbone the implementation is up to you which is both good and bad, depending on how nice you do it ;)
Always remove the view as opposed to just hiding it. If you don't remove (and unbind) your views properly, all bindings, handlers and references to models/DOM elements will linger around.
Depending on the size of your app, you can have a module that handles layouts (as suggested by dominic-tobias), or have a method on the router that takes care of this for you. At its most basic, this method (let's call it _switchView) takes a view and holds onto an instance of the currentView. Upon view change, it removes the current view, sets the new view to the current view and then renders it to the DOM.
Something like this:
_switchView(view) {
this.currentView && this.currentView.remove();
this.currentView = view;
this.$rootEl.html(view.render().$el);
}

Is it possible to show an empty region in a Prism application?

I registered one view to the appropriate region, but the view automatically displays. I would like to register it to a region but not display it by default. Is this possible? I'm new to Prism. Here is the line that I use to register:
regionManager.RegisterViewWithRegion<DepartmentView>(RegionNames.MainRegion);
The first View you register into the region will be shown by default. You will need to register each view into the region if you want to be able to Navigate to the View in the region. There's not too much context to your question, but if you want it to remove the view that's displayed, you can call "Deactivate".
http://msdn.microsoft.com/en-us/library/microsoft.practices.prism.regions.region.deactivate(v=pandp.50).aspx
object activeRegion = regionManager.Regions[RegionNames.MainRegion].ActiveViews.FirstOrDefault();
if (activeRegion != null)
{
regionManager.Regions[RegionNames.MainRegion].Deactivate(activeRegion);
}

Using a UIPageViewController with an embed segue

I'm working on a client project that uses UIPageViewControllers.
The app has a hierarchy of "collection" view controllers that the user navigates through to get to (in this case) a page view controller that contains pages of content.
My design is to have the hierarchy of "collection" view controllers be custom subclasses of UIViewController that know how to manage collections of child view controllers with the client's desired UI.
My view controller that displays a page view controller is a subclass of my parent collection view controller, and that parent view controller class might manage page view controllers, cover-flow style view controllers, table view controllers, or a variety of others.
Ok, so I can't make my view controller that manages a page view controller a subclass of both my parent view controller and of UIPageViewController.
This is an iOS 6 project, so I decided to make my view controller contain a page view controller using an embed segue. That handles the housekeeping of parent/child view controllers painlessly, or so I thought.
However, the client wants a page curl transition in the view controller, and it seems that you can't change the transition of a page view controller after initializing it, nor can you specify the navigation orientation, spine location, etc.
Hmm. Seems I am in a catch 22.
Does anybody know of a way to use an embed segue to embed a page view controller as a child of another view controller and control the settings you get with initWithTransitionStyle:navigationOrientation:options: ?
At this point I might need to abandon the embed segue and manage the parent/child view controller relationship manually, which is a fair amount of work, especially when you deal with forwarding auto-rotation and other messages from parent to child.
Ok, problem solved.
There ARE settings in IB for a UIPageViewController that let you control the transition style, navigation orientation, and options.
The problem is that when I created a container view in my parent view controller, IB created a generic UIViewController as the child and I changed it's type to UICollectionViewController. When I did that the settings stayed those for a generic UIViewController.
I had to delete the generic child UIViewController that IB created, drag a UIPageViewController scene into the storyboard, then control-drag from the collection view onto my new UIPageViewController and select "embed" as the type of segue I wanted. When I did THAT, it gave me the settings I needed.

Prism: Shared View For Multiple Regions

I tried using a single view for multiple Regions located in different views.
View1 -> MyRegion1 uses SharedView
View2 -> MyRegion2 uses SharedView
The initial view is View1 and it successfully shows the SharedView. When I navigate to View2, it also shows the SharedView. Now when I navigate back to View1, the SharedView is gone. Are there other steps I need to do to render a shared view in different views during navigation changes? Thanks a lot.
Not Prism but WPF wants to have a different instance of the view. So, short answer to your question is - NO, it's not possible. Please, create in any way different instances of your SharedView

Resources