var source = $("#order-template").html();
var template = Handlebars.compile(source);
$("#orders").html(template({status: "pending"}));
setTimeout(function(){
$("#orders").html(template({status: "processing"}));
}, 1000);
<script id="order-template" type="text/x-handlebars-template">
<li class="{{status}}">test</li>
</script>
<ul id="orders"></ul>
li {
width: 100px;
height: 20px;
transition: background-color 2s;
}
li.pending {
background-color: #eee;
}
li.processing {
background-color: #fd8;
}
li.delivered {
background-color: #ddd;
}
External resources loaded into this fiddle: