How to break up HTML markup into Marionette views?

Question

I am new to Marionette and trying to understand how to break up HTML markup into Marionette views. The markup I have is for a simple Trader Desktop having two tabs: one showing accounts and another showing pending orders - please see here: http://codepen.io/nareshbhatia/pen/cKdur. The accounts tab is further divided into an accounts table on the LHS and an accounts chart on the RHS. Both these views should be driven by the same model. The tabs are created using Bootstrap. How would you break up this markup into Marionette views?

1. Is it possible/advisable to arrange Marionette views so that this exact markup is produced?
2. How should the Bootstrap tabs be modeled?
3. How should the accounts table and accounts chart be modeled? I was thinking that this would be a Marionette Layout with two regions, but then started thinking why? Isn't the purpose of a layout to give the ability to instantiate different kinds of views in each of its regions? Here I will always have two fixed views, so is layout an overkill?

Thanks in advance for your time.

Answer 1

You have 3 types of views : AppView, TabView and TableView.

AppView - the root of the view - it can be separate Layout or just a regions in you Application instance. Its in charge of rendering and closing sub views in page regions.

TabView - may be CompositeView or Layout - depends on the flexibility you would like to reach in TabView - its its pretty static its just enough. If its dynamic you can use CompositeView and pass collection of tabs to render, but i think is too much.

TableView - ItemView or CompositeView - i think its enough to render a model in table view - you know model properties and you can easily build table view. CompositeView may be used if you may have fiew tables in your tab.

I highly recommend you to checkout these articles - about tree views and nested views in Marionette im sure you will find answers for your questions.

Hope this help.

Answer 2

This is what I think would be a solution here.

Layout will be probably an overkill for accounts tab since you're feeding charts and account and charts the same model.

Just create ItemView that will have access to the model and you're good ( One model one view one template for this tab). Your orders tab should be probably a different view since you're going to hold different models there.

My advise would be to have Main layout that would have 2 regions. One for each tab. In the LHS region you should put ItemView with account as discussed above. In the right hand side region you should put a CompositeView ( to do the formating of a table). CompositeView will hold collection: orderscollection. Your CompositeView would than have an ItemView attribute. This ItemView hooked to the CompositeView will hold each model of your orders collection. If you check out THIS LINK, I pased some code there on how to create a CompositeView with ItemView.