Edit in JSFiddle

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: