使用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));

但我得到的只是一個空白頁面。 我在這里犯的任何錯誤？ 詳細解釋會有所幫助。

Answer 1

"ul"元素不存在，您必須將其附加到實際存在的內容中。

只需在正文中的某處添加<ul></ul> 。

在這里小提琴

Answer 2

您可能想要檢查此問題的答案似乎jquery函數無法訪問該元素，因為在調用之前DOM未加載。 在調用app.js代碼（不將其包裝在函數內）的初始更改之后，我嘗試了一些更多的組合，只有在DOM加載后才能工作。 例如，我在</body>之前移動了腳本調用。

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

它還幫助我知道我們是否使用HTML或XHTML作為我們的文檔類型，以更好地理解這個問題。

Answer 3

嘗試將ref放在底部的外部JS上，就在關閉的body標簽上方

例如

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

這似乎已經為我解決了

使用Handlebar.js

問題描述

3 個解決方案

解決方案1
3 已采納 2012-09-04 17:01:57

解決方案2
0 2012-09-27 22:23:01

解決方案3
0 2013-10-22 15:43:54

使用Handlebar.js

問題描述

3 個解決方案

解決方案1 3 已采納 2012-09-04 17:01:57

解決方案2 0 2012-09-27 22:23:01

解決方案3 0 2013-10-22 15:43:54

解決方案1
3 已采納 2012-09-04 17:01:57

解決方案2
0 2012-09-27 22:23:01

解決方案3
0 2013-10-22 15:43:54