How to integrate handlebars(written in raw javascript) into django templates

Question

Please, I'm still rather new to handlebars templating, my handlebars template works perfectly with just html files, but when I try to render the page containing the handlebars template, I get all sort of errors thrown at me.

<script id="quote-template" type="text/x-handlebars-template"> <h3>Favorite {{name}} Quotes</h3> <ol> {{#each quotes}} <li>{{quote}}</li> {{/each}} </ol> {{{ michaelBio }}} <br/><br /> {{ makeLink "Michael Museum" "http://google.com" }} </script> <script type="text/javascript"> var quoteInfo = document.querySelector("#quote-template").innerHTML;

var template = Handlebars.compile(quoteInfo);

Handlebars.registerHelper("makeLink", (text, url) => {
    text = Handlebars.Utils.escapeExpression(text);
    url = Handlebars.Utils.escapeExpression(url);

    var theLink = '<a href="' + url + '">' + text + '</a>';

    return new Handlebars.SafeString(theLink);
});

var quoteData = template({
    name: "Michael",
    quotes: [{
        quote: "Jesus is the King of kings"
    }, {
        quote: "Lamb of God"
    }, {
        quote: "The saviour of my soul"
    }],
    michaelBio: '<i>The son of the lion of the tribe of Judah</i>'
})

document.querySelector("#quote_data").innerHTML += quoteData;

`

Answer 1

You should stop the django template engine from rendering the contents of your handlebars script block tag. You can do so by wrapping your handlebars' script with

{% verbatim %}{% endverbatim %}

. So in your case you should do the following:

{% verbatim %}

<script id="quote-template" type="text/x-handlebars-template">
    <h3>Favorite {{name}} Quotes</h3>
    <ol>
        {{#each quotes}}
        <li>{{quote}}</li>
        {{/each}}
    </ol>
    {{{ michaelBio }}} <br/><br /> {{ makeLink "Michael Museum" "http://google.com" }}
</script>

{% endverbatim %}

<script type="text/javascript">
var quoteInfo = document.querySelector("#quote-template").innerHTML;

For more info you can look here and more specifically here.