车把未定义

Handlebars is not defined

我是 JS 的新手,之前从未尝试过 Handlebars。我正在尝试教程中的一个非常简单的例子。我已经从 Handlebars 网站下载了 handlebars-v4.0.5.js 并将其包含在我的页面中,如下所示,连同我预编译的模板 name-table.js。我正在尽我最大的努力来完成 this tutorial 但我做不到,因为当我 运行 以下代码时,我得到 ReferenceError: Handlebars is not defined 我这辈子都做不到明白了,我从 Handebars 自己的网站下载的文件是否有效。

<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>

编辑: 我标记的答案解决了问题。 另一个错误出现在这段代码中,我想让任何阅读此代码的人知道这段代码中定义的var injection是一个函数,而不是我认为的字符串。如果 rel 更改为 src,如给出的答案,并且如果我们使用 document.getElementById('button').innerHTML = injection();(注意括号),则此代码将起作用。

您没有在 Handlebars(或您的名字-table 脚本)中加载。您目前有以下标记:

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

您应该为脚本标签使用 src 属性而不是 rel 属性。

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

Mozilla documentation 没有将 rel 属性指定为有效的脚本标记属性。

包括这一行:

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

大功告成。 谢谢