[解決済み] ハンドルバーが定義されていない
質問
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属性を指定していません。
関連
-
[解決済み】webpack: モジュールが見つかりません。Error: 解決できない(相対パスで)
-
[解決済み】Kendo Observable Bindingと併用する場合、Kendo Switch Labelsを変更することは可能ですか?[Kendo-UI]です。
-
[解決済み】SyntaxError: 期待された式が、'<'を得た。
-
[解決済み】JavaScriptで関数が存在するかどうかを確認する方法は?
-
[解決済み] とは何ですか! (not not)演算子とは何ですか?
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] URLを新しいタブで開く(新しいウィンドウではない)
-
[解決済み] JavaScriptで変数が存在するか(定義されているか/初期化されているか)をチェックする
-
[解決済み] Babel 6 regeneratorRuntimeが定義されていません。
-
[解決済み】JavaScriptで定義されていない変数を確認する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Uncaught TypeError: 未定義のプロパティ 'top' を読み込めない
-
[解決済み】SyntaxError: ChromeのJavascriptコンソールでUnexpected Identifierが発生する。
-
[解決済み】React、Uncaught ReferenceError。ReactDOMは定義されていません
-
[解決済み】SyntaxError: JSON の位置 1 に予期しないトークン o があります。
-
[解決済み】npm install --legacy-peer-deps は具体的に何をするのですか?どんなときに推奨されるのか/どんな使用例が考えられるのか?
-
[解決済み】XMLパースエラー:ルート要素が見つからない コンソールの場所 FF
-
[解決済み】DOMException: サポートされているソースが見つからなかったため、読み込みに失敗しました。
-
[解決済み】Vueが定義されていない
-
[解決済み】react router v^4.0.0 Uncaught TypeError: 未定義のプロパティ'location'を読み取れない
-
[解決済み】中央値の計算 - javascript