渲染模板时将变量传递给车把

Question

Is there a way to pass a variable to a handlebars template when it's rendering? I have this template:

<script id="listingTopics" type="text/x-handlebars-template">
{{#each this}}
    <div class="wrapper_individual_listing_topic wrapper_form_dark">
        <div class=" form_section">
            <div class="topics_titles wrapper_listing_topics">
                <a href="topic-{{id}}" class="listing-topics">{{title}}</a> <svg class="affinity {{heartClass}}" data-topicid="{{id}}"><use xlink:href="#starEmpty"/></svg>
            </div>

            <div class="topic-description hide topic-{{id}}">
                <p class="text_standard">{{body}}</p>
            </div>
        </div>
    </div>
{{/each}}</script>

And the variable I want to set when I render the template is heartclass

My initial idea to do this was to set up a function:

function showTopics(container, data, heartclass) {
    var heartClass = heartclass
    var listingTopicsCompiled = listingTopicsTemplate(data);
    $(container).append(listingTopicsCompiled);
}

and then call the function like this

showTopics('#listing-topics', not_favorite_exchanges, 'unfav');

Not sure how to attack this. Any help is very much appreciated!

Answer 1

I ended up just adding a foreach loop and adding the key value pair to each object in the array. So now it is this:

function showTopics(container, data, heartclass) {
    data.forEach(function(entry) {
        entry.heartClass = heartclass;
    });
    var heartClass = heartclass
    var listingTopicsCompiled = listingTopicsTemplate(data);
    $(container).html(listingTopicsCompiled);
}

However, I think it would be faster/better to somehow access a static variable.