javascript - Handlebar.js の操作

Question

私は実際にHandlebar.jsでいくつかのチュートリアルを見つけようとしていましたが、これを見つけましたhttp://javascriptplayground.com/blog/2012/05/javascript-templating-handlebars-tutorial

しかし、実際には期待どおりに機能していません。

私がやっていることは、index.htmlファイルを持っていることです。

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js" type="text/javascript" charset="utf-8"></script>
        <script src="app.js" type="text/javascript" charset="utf-8"></script>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Messing with Handlebars</title>

    </head>
    <body>
        <script id="ajax-comment" type="text/x-handlebars-template">
            <li>
            <span class="meta">{{name}} on {{date}}</span>
            <p>{{comment}}</p>
            </li>
        </script>

    </body>
</html>

そして、コードを含むapp.jsです。

var source = $("#ajax-comment").html();
var template = Handlebars.compile(source);
var data = {
    name : "Jack",
    date : "12/04/12",
    comment : "This is a really awesome tutorial. Thanks."
};
$("ul").append(template(data));

しかし、私が得ているのは空白のページだけです。私がここで犯している間違いはありますか？詳しい説明助かります。

score 3 · Accepted Answer

"ul"要素が存在しない場合は、実際に存在するものに追加する必要があります。

<ul></ul>体のどこかにを追加するだけです。

ここでフィドル

score 0 · Accepted Answer

この質問に対する回答を確認することをお勧めします。呼び出しが行われる前に DOM がロードされていなかったため、jquery 関数が要素にアクセスできなかったようです。app.jsコードを呼び出す最初の変更の後(関数内にラップせずに)、DOMがロードされて機能した後にのみ、さらにいくつかの組み合わせを試しました。たとえば、スクリプト呼び出しをの直前に移動しましたが、</body>これも機能しました。

... <script src="app.js" type="text/javascript" charset="utf-8"></script> </body>

また、この問題をよりよく理解するために、ドキュメントタイプとして HTML と XHTML のどちらを使用しているかを知るのにも役立ちました。

score 0 · Accepted Answer

外部JSへの参照を、body終了タグのすぐ上に配置してみてください

例えば

<body>
    <ul></ul>
   <!-- last thing on the page--> 
   <script src="app.js" type="text/javascript"></script>
</body>

これで解決したようです

javascript - Handlebar.js の操作

3 に答える 3

Related

Reference