Check your web console for a (very) little bit of verbosity
<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>