Template inheritance

Essentially this pattern allows you to extend parent view and viewModel templates with child templates loaded on the fly. Views contain block elements that contain default markup.

EE templates

work
   index.html

Stash templates

layouts    
   standard.html
viewmodels    
   page_vm.html    
   projects_vm.html    
partials
   project_list.html    
   project_detail.html    

/templates/default_site/work.html

{stash:embed
    context="@URI"
    name="page_vm"
    file_name="viewmodels:page_vm"
    parse_stage="both"
    stash:_status="open"
    stash:_channel="pages"
    stash:_layout="standard"
}

/stash_templates/viewmodels/page_vm.html

{stash:embed context="layouts" name="{stash:_layout}"}

{!-- capture entry data, default to 'welcome' entry --}
{exp:channel:entries 
    channel="{stash:_channel}"
    status="{stash:_status}" 
    limit="1" 
    disable="member_data|pagination|categories"
    {if segment_2} require_entry="yes"{/if}
}
    {if no_results}
        {redirect="site/404"}
    {/if}

    {!-- standard entry fields --}
    {exp:stash:set type="snippet"}
        {stash:pg_title}{title}{/exp:low_replace}{/stash:pg_title}
        {stash:pg_entry_id}{entry_id}{/stash:pg_entry_id}
        {stash:pg_url_title}{url_title}{/stash:pg_url_title}
    {/exp:stash:set}

    {!-- custom entry fields --}
    {exp:stash:set type="snippet"}
        {stash:pg_intro}{page_intro}{/stash:pg_intro}
        {stash:pg_body}{page_body}{/stash:pg_body}
    {/exp:stash:set}

    {!-- load a widget (child viewModel)? --}
    {exp:switchee variable="{page_widget}" parse="inward"}
        {case value="#^S+#"}
            {!-- load the associated viewModel for the widget --}
            {exp:stash:embed 
                context="viewmodels" 
                name="{page_widget}_vm" 
                process="inline" 
                replace="yes"
            }
        {/case}
    {/exp:switchee}

{/exp:channel:entries}

/stash_templates/viewmodels/projects_vm.html

{exp:switchee variable="{segment_3}" parse="inward"}

    {!-- project listing --}
    {case value=""}

        {!-- load the project_list layout into the pg_content block --}
        {exp:stash:set name="pg_content"}{exp:stash:embed:partials:project_list}{/exp:stash:set}

        {exp:stash:set_list 
            name="projects" 
            parse_tags="yes" 
            save="yes" 
            scope="site" 
            replace="no" 
            refresh="60"
        }
            {exp:channel:entries 
                channel="projects"
                status="open" 
                disable="member_data|pagination|categories"
                dynamic="off"
            }
                {stash:project_title}{title}{/stash:project_title}
                {stash:project_url_title}{url_title}{/stash:project_url_title}
            {/exp:channel:entries}   
        {/exp:stash:set_list}
    {/case}

    {!-- project detail --}
    {case default="yes"}

        {!-- load the project_detail layout into the pg_content block --}
        {exp:stash:set name="pg_content"}{exp:stash:embed:partials:project_detail}{/exp:stash:set}

        {!-- get project data --}
        {exp:channel:entries 
            channel="projects"
            status="{stash:_statuses}" 
            limit="1" 
            disable="member_data|pagination|categories"
            url_title="{segment_3}"
            dynamic="off"
	require_entry="yes"
        }
            {if switchee_no_results}
                {redirect="site/404"}
            {/if}

            {exp:stash:set type="snippet"}

                {!-- override the heading in the main layout --}
                {stash:pg_title}{title}{/stash:pg_title}

                {!-- capture project custom fields for use in the project_detail partial --}
                {stash:project_image}{project_image}{/stash:project_image}

            {/exp:stash:set}

        {/exp:channel:entries} 

        {!-- prev/next entry links --}
        {exp:channel:next_entry
            channel="projects"
            status="{stash:_statuses}"
            url_title="{segment_3}"
            parse="inward"
        }
            {exp:stash:set name="project_next_url" type="snippet"}{url_title}{/exp:stash:set}
        {/exp:channel:next_entry}

        {exp:channel:prev_entry
            channel="projects"
            status="{stash:_statuses}"
            url_title="{segment_3}"
            parse="inward"
        }
            {exp:stash:set name="project_prev_url" type="snippet"}{url_title}{/exp:stash:set}
        {/exp:channel:prev_entry}
    {/case}
    {/exp:switchee}

/stash_templates/layouts/page.html

    <!DOCTYPE html>
    <html>
        {sn_head}
        <body>   
            <h1>{pg_title}</h1>
            <div class="content">
            {exp:stash:block name="pg_content"}
                {if pg_intro}<p class="intro">{pg_intro}</p>{/if}
                {pg_body}
            {/exp:stash:block}
            </div>
            {sn_footer}
        </body>
    </html>

/stash_templates/partials/project_list.html

    <ul class="list list--projects">
        {exp:stash:get_list name="projects"}
        <li><a href="/{segment_1}/{segment_2}/{url_title}">{title}</a></li>
        {/exp:stash:get_list}
    </ul>

/stash_templates/partials/project_detail.html

    <img src="{project_image}" alt="">
    <a href="{project_prev}">Previous</a> | <a href="{project_next}">Next</a>