Функция JQuery не может быть вызвана в шаблоне Hogan?

Question

Я хочу просто наложить одну часть изображения на другую. Ниже мое изображение:

И сейчас у меня есть следующее:

HTML:

<script type="text/template" id="hit-template">
  {{#hits}}
  <div class="hit">
    <div class="hit-content">
      <h3 class="hit-name">Name</h3>
      <span class="stars">4.0</span> 
    </div>
  {{/hits}}
</script>

CSS:

.hit-content {
    font-size: 13px;
    display: inline-block;
    margin-left: 20px;
    vertical-align: top;
}

//This CSS class shows all the grey stars on my page
.hit .hit-content span.stars, span.stars span {
    height: 35px;
    width: 185px;
    display: inline-block;
    background: url('/resources/graphics/stars-icons.png') 0 0 repeat-x;
}

//This CSS class should be to show only the orange stars on my page
.hit .hit-content span.stars span {
    background: url('/resources/graphics/stars-icons.png') 0 -36px repeat-x;
    display: inline-block;
}

Могу ли я получить его так, чтобы я мог наложить оранжевые звезды на серые звезды, чтобы показать определенные звездные рейтинги?

Я пробовал:

Javascript:

$hits = $('#hits');
var hitTemplate = Hogan.compile($('#hit-template').text());
$hits.html(hitTemplate.render(content));


$.fn.stars = function() {
    return $(this).each(function() {
        // Get the value
        var val = parseFloat($(this).html());
        // Make sure that the value is in 0 - 5 range, multiply to get width
        var size = Math.max(0, (Math.min(5, val))) * 16;
        // Create stars holder
        var $span = $('<span />').width(size);
        // Replace the numerical value with stars
        $(this).html($span);
    });
}

$(function() {
    $('span.stars').stars();
});

По какой-то причине $('span.stars').stars(); вызов никогда не выполняется, и я не уверен почему. Может кто-нибудь объяснить мне, почему это происходит? Спасибо!

Изменить: Новая попытка с обещанием:

function renderHits(content) {
    var promise = new Promise(function(resolve, reject) {
        $hits.html(hitTemplate.render(content));
        resolve();
    });
    promise.then(function(val) {
        $('span.stars').stars();
    });
};
$.fn.stars = function() { 
  return this.each(function() {
    // Get the value
    console.log("HI");
    var val = parseFloat($(this).html()); 
    // Make sure that the value is in 0 - 5 range, multiply to get width
    var size = Math.max(0, (Math.min(5, val))) * 36.5; 
    // Create stars holder
    var $span = $('<span> </span>').width(size); 
    // Replace the numerical value with stars
    $(this).empty().append($span);
  });
}