车把未定义答案

【问题标题】：Handlebars is not defined车把未定义
【发布时间】：2016-12-13 01:34:18
【问题描述】：

我是 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();（注意括号），则此代码将起作用。

【问题讨论】：

你把使用把手的脚本放在加载它的脚本标签上。
试过这个并没有解决问题，正如我所期望的那样，因为您引用的“在”车把定义“之前”的脚本直到 window.onload 之后才会运行
我很抱歉，你是对的。尝试将Handlebars 替换为window.Handlebars。虽然不应该，但您可能会因为使用未初始化的 var 而遇到严格模式异常。
加载页面。打开控制台（暂时忽略错误）。输入window.Handlebars。击回。它是一个对象吗？这意味着您的代码在加载之前正在运行。它是未定义的吗？这意味着把手脚本有问题。
@fts_acer 我已经回滚了您的编辑，因为它消除了问题的根本原因，从而使问题无效。如果您有后续问题，请ask a new one。

标签： javascript handlebars.js referenceerror

【解决方案1】：

包括这一行：

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

你已经完成了。谢谢。

【讨论】：

【解决方案2】：

您没有在 Handlebars（或您的名称表脚本）中加载。您目前有以下标记：

    <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 属性指定为有效的脚本标签属性。

【讨论】：