我的手柄模板在渲染时会自动终止

Question

I'm having a handlebar template defined. When rendered, a closing tag is automatically added just before any closing tag in my template, which leads my template being considered as plain text.

If you check this page: https://www.locaboat.com/tarifs/

ex.: {{myVariable}} is displayed as {{myVariable}}

.

I've checked and I don't have any tag left open. Even weirder, if I add an antislash before the closing tag, it keeps on interpreting the handlebars correctly, but of course it's not displayed correctly

ex.: {{myVariable}} is displayed as {{myVariable}}</div>

working on PHP Version 5.6.40, UTF-8 server

<script id="offer-template-<?php echo $shortcode_id;?>" type="text/x-handlebars-template">
    <div class="col-lg-4 col-md-6 api-item date price" data-date="{{date}}" data-price="{{price}}" data-image="{{image}}" data-api-id="{{boat_id}}">
        <div class="card mb-4">
            <div class="card-header">
                <div class="card-img-top"><img src="{{image}}"></div>
                <div class="discount"><span class="h-rounded">-{{percent_discount}}%</span></div>
            </div>

Right now, the output displays the rest of my handlebars template as plain text where it should be interpreted as a template, same as this page: https://www.locaboat.com/offres-speciales/

Answer 1

You have a problem with the order in which dependencies are loading on the page. I don't see jQuery being imported in the source for this page at all, but it seems to be working. Perhaps it is coming in as a dependency of kinetic or another plugin. Anyway, you need to make sure it is imported before handlebars.

In your script tags, you are using $ as an alias for jQuery, but if you open the console and type '$', you can see it is undefined (whereas, if you type 'jQuery' you get the function definition, as expected).

Since it seems that jQuery is otherwise working on the page, you might just need to replace this:

var offer_source = document.getElementById("offer-template-44").innerHTML;

with this:

var offer_source = $("#offer-template-44").html();

Or if that doesn't work, try $.noConflict();