ハンドルバーのテンプレートを外部ファイルに抽象化せずにAJAX

ハンドルバーテンプレートをロードする方法はもっと簡単ですか？できることは簡単なようだ。私はindex.html次のコードがある場合：ハンドルバーのテンプレートを外部ファイルに抽象化せずにAJAX

<body> 
    <h1>From the index.html</h1> 
    <div id="hbs"></div> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script> 
    <script id="test" type="text/x-handlebars-template"> 
     <h2>This is from HBS</h2> 
     <p> 
     hbs generated this p tag! 
     </p> 
    </script> 
    <script src="js/script.js"></script> 
</body>

をここでjs/script.jsでテンプレートをコンパイルするためのスクリプトのコードです：

var template = Handlebars.compile(document.querySelector("#test").innerHTML) 
document.querySelector("#hbs").innerHTML = template({})

これは正常に動作しますが、私はindex.htmlを開いたとき、私は見ることができますテンプレートを通じてpタグが生成されます。このテンプレートを別のファイルに抽象化する簡単な方法が必要です。

template.hbs：あなたはHBSファイルにテンプレートを置くことができる

出典

2016-03-28 Andrew Kim

あなたのhtmlを取得する

<script type="text/x-handlebars-template"> 
     <h2>This is from HBS</h2> 
     <p> 
     hbs generated this p tag! 
     </p> 
</script>

そしてquerySelectorするのではなく、自分のファイルを取得するために、AJAXを使用し

$document.ready(function(){ 
    $.get('/url/template.hbs', function(source) { 
     var template = Handlebars.compile(source); 
     document.querySelector("#hbs").innerHTML = template({}); 
    } 
});

出典

2016-03-29 07:03:20

そうですね、私はこの方法に精通していました。 ajaxを活用する必要がないのは簡単だと思っていました。しかし、私はそれを見つけることができませんでした。ありがとう！ –

それはあなたのために大丈夫です質問を受け入れてください。ありがとう –

私は尋ねた質問への正確な答えではなく、それは解決策ですが、疑問に提出されたものはありません。 AJAXなしと言っています –

ハンドルバーのテンプレートを外部ファイルに抽象化せずにAJAX

答えて

関連する問題