javascript - Handlebars is not defined

I am new at JS and never tried Handlebars before. I'm trying a very bare-bones example from a tutorial. I have downloaded handlebars-v4.0.5.js from the Handlebars website and included it in my page, as follows, along with a template I precompiled, name-table.js. I'm trying my god damned hardest to complete this tutorial but I can't, because when I run the following code, I get ReferenceError: Handlebars is not defined which I can't for the life of me understand, if the file I downloaded from Handebars' own site is in any way valid.

<html>
    <head>
        <meta charset='UTF-8'>
        <title>Test Page!</title>
        <script type='text/javascript'>
            function init() {
                document.getElementById('button').addEventListener('click', buttonClick, false);
            }
            function buttonClick() {
                var injection = Handlebars.templates['name-table'];
                document.getElementById('button').innerHTML = injection;
                console.log('hello, world.');
            }

            window.addEventListener('load', init, false);
        </script>
    </head>
    <body>
        <button id='button'>Button</button>
        <div id='content'></div>

        <script type='text/javascript' rel='js/handlebars-v4.0.5.js'></script>
        <script type='text/javascript' rel='js/name-table.js'></script>
    </body>
</html>

Edit: The answer I marked solved the problem. Another error appears in this code, and I want to let anyone reading this know that var injection as defined in this code is a function, not a string as I had thought. This code will work if rel is changed to src as in the answer given, and if we use document.getElementById('button').innerHTML = injection(); (note the parens).

<html>
    <head>
        <meta charset='UTF-8'>
        <title>Test Page!</title>
        <script type='text/javascript'>
            function init() {
                document.getElementById('button').addEventListener('click', buttonClick, false);
            }
            function buttonClick() {
                var injection = Handlebars.templates['name-table'];
                document.getElementById('button').innerHTML = injection;
                console.log('hello, world.');
            }

            window.addEventListener('load', init, false);
        </script>
    </head>
    <body>
        <button id='button'>Button</button>
        <div id='content'></div>

        <script type='text/javascript' rel='js/handlebars-v4.0.5.js'></script>
        <script type='text/javascript' rel='js/name-table.js'></script>
    </body>
</html>

Share Improve this question edited Aug 6, 2016 at 23:44 asked Aug 6, 2016 at 23:06 Steverino 2,2666 gold badges32 silver badges56 bronze badges

1 You put the script that uses handlebars above the script tag that loads it. – Jared Smith Commented Aug 6, 2016 at 23:08
Tried this and it did not solve the problem, as I would expect, because the script you reference that is "before" the handlebars definition doesn't run until after window.onload – Steverino Commented Aug 6, 2016 at 23:10
My apologies, you are correct. Try replacing Handlebars with window.Handlebars. Although it shouldn't, you may be getting a strict mode exception for using an uninitialized var. – Jared Smith Commented Aug 6, 2016 at 23:13
1 Load the page. Open the console (ignoring the error for now). Type window.Handlebars. Hit return. Is it an object? That means your code is running before it loads. Is it undefined? That means there's a problem with the handlebars script. – Jared Smith Commented Aug 6, 2016 at 23:21
1 @fts_acer I've rolled back your edit, as it removes the root cause of your problem and thus invalidates the question. If you have a follow-up question, please ask a new one. – Siguza Commented Aug 6, 2016 at 23:38

| Show 4 more comments

2 Answers 2

Sorted by: Reset to default 11

You are not loading in Handlebars (or your name-table script). You currently have the following markup:

    <script type='text/javascript' rel='js/handlebars-v4.0.5.js'></script>
    <script type='text/javascript' rel='js/name-table.js'></script>

You should be using the src attribute instead of the rel attribute for script tags.

    <script type='text/javascript' src='js/handlebars-v4.0.5.js'></script>
    <script type='text/javascript' src='js/name-table.js'></script>

The Mozilla documentation does not specify the rel attribute as a valid script tag attribute.

Include this line:

<script src="https://twitter.github.io/typeahead.js/js/handlebars.js"></script>

You are done. Thanks.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Handlebars is not defined - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)