在Hogan模板中调用JQuery函数无法调用？

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);
  });
}