Trigger Cached Render

Trigger New Render

Check your web console for a (very) little bit of verbosity

What makes this work?

<div id="body"></div>

<script id="welcome-message" type="text/x-handlebars-template">
    <h1>Hi there, I'm {{ name }}</h1>
    <h2>Some cool things to do are:</h2>
    {{> list}}
</script>

<script id="list" type="text/x-handlebars-template">
    {{# if things }}
        <ul>
            {{#things}}
                <li>{{name}}</li>
            {{/things}}
        </ul>
    {{/ if }}
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="stem/stem.demo.js"></script>

<script>
stpl.welcome_message = new Stem('#welcome-message');
Handlebars.registerPartial('list', document.getElementById('list').innerHTML);

document.getElementById('body').innerHTML = stpl.welcome_message.grab({
    name: 'Colby',
    things: [
        {
            name: 'Go to school'
        },
        {
            name: 'Read a book'
        },
        {
            name: 'Be nice to your mom'
        }
    ]
});

document.getElementById('trigger1').addEventListener('click', function(){
    document.getElementById('body').innerHTML = stpl.welcome_message.grab({
        name: 'Colby',
        things: [
            {
                name: 'Go to school'
            },
            {
                name: 'Read a book'
            },
            {
                name: 'Be nice to your mom'
            }
        ]
    });
});

document.getElementById('trigger2').addEventListener('click', function(){
    document.getElementById('body').innerHTML = stpl.welcome_message.grab({
        name: 'Not Colby',
        things: [
            {
                name: 'Don\'t go to school'
            },
            {
                name: 'Don\'t read books'
            },
            {
                name: 'Still, you should be nice to your mom'
            }
        ]
    });
});</script>