1. ホーム
  2. javascript

[解決済み] ハンドルバーが定義されていない

2022-02-01 07:57:31

質問

JS初心者で、Handlebarsを試したことがありません。 チュートリアルにある非常に素朴な例を試しています。 私は、ダウンロードした handlebars-v4.0.5.js をHandlebarsのウェブサイトから取得し、プリコンパイルしたテンプレートと一緒に、以下のように私のページに含めました。 name-table.js . を完成させるために、神懸かり的な努力をしているのです。 このチュートリアル というのも、次のコードを実行すると、次のようになるからです。 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(またはname-tableスクリプト)で読み込んでいない。現在、以下のようなマークアップになっています。

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

を使用する必要があります。 src 属性の代わりに リレー 属性を使用します。

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

Mozilla のドキュメント は、有効なscriptタグの属性としてrel属性を指定していません。