车把错误：未定义“车把”

Question

I am getting an error as Handlebars is not defined

   app/components/chart-container/chart-container.js
     15 |        var theTemplate = Handlebars.compile(chartContainerTemplate);
                                   ^ 'Handlebars' is not defined.

this is the whole file where handlebars is suppose to be not defined

'use strict';

var APP = window.APP = window.APP || {};

APP.chartContainer = (function () {

    var bindEventsToUI = function () {

        $.getJSON('maindata.json', function(data) {
            var setData = localStorage.setItem('jsonData', JSON.stringify(data));
            // console.log('data', localStorage.getItem('jsonData'));
        });

        var chartContainerTemplate = $(".chart-container").html();
        var theTemplate = Handlebars.compile(chartContainerTemplate);

        var getData = localStorage.getItem('jsonData');

        var theCompiledHtml = theTemplate(getData);

        console.log(theTemplate);

        $(document.body).append(theCompiledHtml);
    };

    var init = function (element) {
        console.log('APP.chartContainer');
        bindEventsToUI();
    };

    /**
     * interfaces to public functions
     */
    return {
        init: init
    };

}());

and in the default.hbs I have this within the body tag

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <script>window.jQuery || document.write('<script src="assets/scripts/vendor/jquery-1.11.3.min.js"><\/script>')</script>
 <script src="https://cdn.jsdelivr.net/handlebarsjs/4.0.5/handlebars.min.js"></script>

what am I missing ?

Answer 1

Wait for the download of all the resources before launching your template

<script>
    $(document).ready(function () {
        // launch your function here
    });
</script>