2

Reading through the Stash Wiki and various Stack Exchange threads I found it difficult to try to fully wrap my head around the MVVM template model advocated by Mark Croxton.

This thread aims to provide a community Wiki with a concise and definitive explanation of what goes where and how they interact.

I'm very new to this model - so I'd appreciate any edits to correct mistakes. I'm not convinced my understanding of the partials part of the equation is right yet.

3

Snippets

Snippets are loaded in just one database query - but this query returns every single snippet on the website - even if the page doesn't need it.

This behaviour makes what is otherwise a really efficient way of reusing elements really quite inefficient.

You should only use Snippets for elements that are used throughout the site.

The things that are on every page, or the majority of pages:-

  • Headers
  • Footers
  • META Tags
  • Common Date Formats
  • etc.

Elements that are only used on the site once or twice (gallery, comments, etc.) wouldn't be efficient to store as snippets and would probably be better served as Partials.


Partials

Partials could be thought of as the next step up from Snippets. They're loaded only when needed but are slightly heavier.

For elements such as galleries, sidebars or "configure this product" on eCommerce websites they allow for DRY reusable code without the overhead of storing them all in snippets.

Aside Note: A layout should try to avoid ExpressionEngine code as much as possible other than {exp:stash:get} and the View Model should try to avoid markup as much as possible. This is a strong separation of concerns.

Partials allow for a middle-ground. You can use markup within them but are called from the View Model.

For example - if you have a "Blog" entry page and a "Press Release" entry page they would be almost identical, so would share the same layout. However a "Blog" would have a "About this author" section and Comments, while a Press Release would not. In this instance, the about the author section and comments could be partials.

You could think of partials as sub-templates.

Partials are usually Stash templates.


Layouts

Your website should have a unique layout for each use case or purpose on the website. That is to say that a product page should have a different layout than a landing page, than a blog, than a standard text page.

Even if they're 99% the same, separating them allows for future expandability and highly understandable code.

When two parts of a website share the same purpose, for example a "Blog" index page and a "Press Releases" index page they could share the same layout.

Layouts contain your markup. It is the front-end to the View Model's back-end.

Within them call upon your snippets such as {sn_header} so that you don't need to rewrite that on every layout.

Layouts are usually Stash templates.


View Model

The view model is the behind the scenes part. It does the following:-

  1. Tells the page which layout to use
  2. Grabs data from ExpressionEngine's database
  3. Adds any partials that it requires

View Models are standard ExpressionEngine templates.

How the stash model works

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.