A Visual Guide to Marionette.js Views

Marionette.js Item View Visual

When I first began working on the front-end to this one interactive application, I decided to just write a few lines of JavaScript to handle some miscellaneous things behaviors on the front-end. However, that soon turned into a completely interactive front-end with thousands of lines of JavaScript trying to hack together the entire DOM. Luckily, Backbone.js came to the rescue which was later accompanied with Marionette.js. One of the difficulties I had with the documentation that existed was trying to visualize the handful of useful views Marionette.js provides.

To help visualize the difference (and similarity) of layouts, regions, composites, collections, and item views, I’ve created helpful diagrams to visually demonstrate how the pieces of the puzzle fit together.

Layouts

Useful when you need to nest multiple views inside of a container and occasionally need to swap them out with other views or show/hide them.

Marionette.js Layout UML

Layouts are the top-level component in your application. You add regions into areas of the application that you plan on turning into Marionette.js views. Areas that don’t need views that are static, such as the header in the example below, should not be assigned a region.

Marionette.js Regions Visual

Regions

What can go inside a region? Any of the views can go inside, including another layout. You can keep recursing until you run out of memory! (N.B. users do not like it when you consume all of their memory)

A note about swapping views around, the Marionette.js philosophy about re-using views is that you should not re-use them when calling myLayout.region.show(view). Doing so will cause the event binding to get messed up since it does not call delegateEvents within the show() method.

Marionette.js Region UML

Using our previous example of the word processor application, the layout would be created with the two regions. When the time comes that you want to populate the region, you would execute code like the following. The next section goes into details about the different views that can be put into a region.

Marionette.js Region Details Diagram

Item Views

I skipped directly to the item view because it’s the simplest of the three Marionette.js views that go inside a region. An item view is Marionette’s tool for providing a view of a single model. Taking a model and a template, the item view will take the values from the model and pass them into the template to populate it.

Marionette.js Item View UML

If we are creating a form for editing a user’s profile, the diagram below is about what it would look like using Marionette.js.

Marionette.js Item View Visual

Collection Views

Item views take care of rendering a single model, but now you want to render a collection of models. Marionette.js gives you the CollectionView to help with that. A collection view will render each model and concatenate the HTML together. It does some handy things like automatically handling the rendering when a model is added, removed, or updated in the collection, or if the collection itself is reset.

Marionette.js Collection View UML

That’s it, all you do is point it to an item view and initialize it with a collection and it will render all the models. In the example below, we want to render a gallery (collection) of images (model). By creating the collection view with the item view set to the item view of the individual image and then initializing the collection view with a collection of images, we are able to render the entire gallery, using only a few lines of code.

Marionette.js Collection View Visual

Composite Views (as a wrapper)

In the collection view, you can’t wrap the concatenated HTML with a template. Often times, you’ll want to do this. A simple example would be a table; you can’t just concatenate a bunch of <tr> tags together and plop them onto the page.

That’s where the composite view comes into play. It behaves almost the exact same way as collection view (it actually extends the collection view class), but adds in a template and itemViewContainer option.

Marionette.js Composite View UML

This is commonly used when you need to render a collection as an HTML table. Rendering just a collection view containing item views with a top-level container of <tr> would result in a bunch of <tr> tags concatenated together. Using the composite view, you can create a template for the collection, assign the container where all the concatenated item views are inserted, and you’re golden.

Marionette.js Composite View Visual

Composite Views (as a branch/leaf)

Another, more complicated, use case of a composite view is a that you want to recursively display a collection of models which, themselves, have a collection of models. A common example of this is writing a tree view for a filesystem browser.

I haven’t run into this situation yet, but there is a good blog post that explains the filesystem tree view example.

The following two tabs change content below.

Matt Bajoras

Latest posts by Matt Bajoras (see all)

10 Comments

  1. Great post.!
    It’s very easy to understand Marionette.js different views with the help of these diagrams. They are the best one I have seen.

    Reply
  2. The images appear to be missing.

    Reply
    • Looks fine here — anyone else missing images?

      Reply
  3. Great visual guide! ItemView’s are a pretty close analog to vanilla Backbone views, but I couldn’t figure out what the heck a CompositeView was for the longest time!

    Reply
  4. Great visualization of Marionette’s different view types. ItemView’s are pretty close to Backbone views but I couldn’t figure out CompostiveViews for the longest time.

    Reply
  5. Thanks a lot. Good post)

    Reply
  6. moar!

    Reply
  7. Thank you! I’m on my first Marionette project and I’ve been grasping it, but those diagrams and code examples really help a lot.

    Reply
  8. Thanks for this great post. Those visualizations really made things clear for me.

    Reply
  9. This is brilliant, I had been struggling over the last couple of days with Marionette. This makes sense now – thank you :-)

    Reply

Trackbacks/Pingbacks

  1. Webdesign and Development Resources - Page 3 - […] A Visual Guide to Marionette.js Views […]
  2. Frontend Development | espaco99 - […] A Visual Guide to Marionette.js Views […]
  3. 最受关注的前端开源项目资源 – CSSwang-CSS网站 - […] 关于Marionette.js视图的可视化指南 […]
  4. 直接拿来用!最火的前端开源项目 | HTML5 CSS3 JavaScript - […] A Visual Guide to Marionette.js Views […]
  5. A Visual Guide to Marionette.js Views | Art & Logic Blog | Thoughts of an Engineer - […] A Visual Guide to Marionette.js Views | Art & Logic Blog. […]
  6. 直接拿来用!最火的前端开源项目(一) | 农夫庄园 - […] 关于Marionette.js视图的可视化指南 […]
  7. GitHub上最火的前端开源项目列表 | deep的个人网站 - […] A Visual Guide to Marionette.js Views […]

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>