Backbone.Marionette Layouts, regions and views - marionette

In may Marionette app I do have set a layout with 3 regions
headerRegion
mainRegion
footerRegion
I am using the footer region to display detail views of my models (itemViews).
Now I do have the situation, that I want to use this region with collectionView in combination with a button-group: Add-Button (adds a model/itemView) and a OK-Button (closes/hides the collectionView and the button-group. I would like to handle these 2 itemViews as a component, showing and hiding them in 1 step.
I am not sure what the right way to do this is.
Option1:
show collection view in subregion1 of footerRegion and the button-group in subregion2 of footerRegion
Option2:
create a new Layout and nest it
Option3:
do it somehow with a compositeView?
Option4:
some combination with jquery hide/show the button-group?

My vote is for Option #2: nested layout. I do this a lot and it works very well. It's easy to manage and easy to work with, IMO.

Related

How to get data from server in Nativescript gridview?

I am able to load data from sqlServer using mat table in angular, but have no clue how to do same in nativescript?. I think GridView will work,but cant find source to load dynamic data.
If GridLayout is what you mean by GridView, it's just layout not responsible for loading data.
If you are looking to load list of items on screen, then ListView is what you need. If you like to show table kind of layout with multiple columns then you must design your item template with a GridLayout.
If you go with RadListView, you have different layouting option too.

How to implement routing when I need swipeable view inside another view with Ionic Framework?

How can I implement ui-router when I make a swipeable view inside another view with Ionic Framework?
I need to make a calendar view, which will contain 3 parts:
Navigation bar (unchangeable)
Day details bar under the navigation bar it should not move while I swipe list (3) and it should display current day/date
Scrollable/Swipeable list of time slots available for selected day, this list should be swipeable back and forth to next/previous day and scrollable.
This is how I imagine myself how it should be:
Ok, I've done it much more simpler by using ion-slide-box to which I dynamically adding slides as explained here: How to insert data dynamically to ion-slide-box Angularjs Ionic.
Anyway, if somebody has another idea how can it be implemented please comment or post your answer, it's good to have few another solutions in a toolbox.

Marionette Layout object to render tab content

I have a region in which I need to have a tabbed view (simple) however if I want the tab content to be differently layout - not sure how to achieve it. I can create different layout with multiple region and corresponding view, but how do I attach this to tab content, given that applyout can only be attached to region? Or can this be attached to one of the div of tab-content using $el?? Need some pointers.
Not sure I entirely understand your question.. But here goes.
I have implemented a navigation component where I can pass a tabsCollection and region. It will set up a region for the content and a list of tabs above it. When a tab is clicked it will fire the callback on the model in the tabsCollection which can be used to display what ever content you want.
There are more complex ways to handle this to allow for caching of a tabs content. But basically using a Backbone collection for the tabs with their own function for displaying content will do the trick.

Load a XAML Layout dynamically based on User interaction

Good day, I am quite new to windows phone and so please bear with me. I have a requirement to load a XAML layout based on what the user chooses. For example, if i have 4 XAML layouts A, B, C, D, when the user chooses C, the respective XAML layout should be loaded and if A is choosen later, that should come up. I can create different XAML layouts and use the OnNavigateTo Method, but i think its not very efficient. Is there a way, i can group the XAML Layouts together so that it can switch between them easily?.. I have heard of using templates, but can't really find any concrete example of how it works. Any help or links will be greatly appreciated. Thank you.
From my understanding you do not need to use templates. Since there are four different actions that have four different views associated with them, there shouldn't really be a problem with having a separate page for each action.
The problem might also be this - how different are the layouts? If data is the only thing that changes across them, you might think about having a view model to bind to and simply change the bindable source.
Bottom line: just use pages, or a single page bound to dynamic data, depending on your scenario.
In my knowledge , I ask you to prefer the UserControls implementation in your UI. You can have A,B,C and D layouts as a separate UserControls and can have those UserControls in the same page. Just make the visibility changes based on the condition that recognize it in the code behind. I think it may help you.
You can solve this in many different ways. If you are not supposed to load the layout on the same page, create 4 separate pages for each view and navigate to correct page.
If you are required to update the current view, you can choose one of the following:
- Place all four layouts into each own Grid and set Visibility="Collapsed" for each one. Then, when you need to show a layout, simply change its Visibility to True.
- Same as above, but use Visual States to add some animations.
- Create 4 user controls and dynamically create the one you need and add it to the current page.
You need to account for several factors here:
- Clean code and clean design.
- Animations and transitions.
- What about Back key? If user is supposed to navigate back to selection screen once he is done, consider navigating to separate pages.
Don't forget the last point, it may be crucial when choosing the right solution.

Bind various panaroma/pivot items using MVVM

could someone help me with design/understanding the problem: what I need to achieve is page with Panorama/Pivot control, where its items (panos/pivots) will be set via binding, using standard MVVM pattern. Problem is I need to have different content (different user controls) on each pano/pivot, that means If I define a panorama/pivot item template, I doom all of them to be alike, which is not what I want.
I found this question here already asked: Databound windows phone panorama with MVVM design but its still not clear to me. Many thanks.
If you have a dynamic page count on panorama/pivot you could use selector to choose what template is right according to your content.
Implementing DataTemplateSelector
Also, Data Binding Pivot to MVVM may help you too
You could add a dependency property to the user control that you want to use as a data template, a dependency property named "Type" for example and depending on that property you can change the layout of your user control (data template) - for example you could have multiple grids inside your user control and you could show and hide them depending on the type.

Resources