Javascript 使用Handlebar.js_Javascript_Handlebars.js

Javascript 使用Handlebar.js

javascript

Javascript 使用Handlebar.js,javascript,handlebars.js,Javascript,Handlebars.js,我实际上是想找到一些关于Handlebar.js的教程&我找到了这个但它实际上并没有如预期的那样发挥作用我现在做的是我有一个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/javas

我实际上是想找到一些关于Handlebar.js的教程&我找到了这个

但它实际上并没有如预期的那样发挥作用

我现在做的是我有一个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>

但我得到的只是一张空白页。我在这里犯了什么错误？详细的解释会很有帮助。

“ul”

元素不存在，您必须将它附加到实际存在的东西上

只需在身体的某个地方添加一个

您可能需要检查此问题的答案似乎jquery函数无法访问元素，因为在调用之前没有加载DOM。在调用app.js代码的初始更改（没有将其包装到函数中）之后，我尝试了更多的组合，只有在加载DOM之后才起作用。例如，我在

之前移动了脚本调用，这也起到了作用

。。。

它还帮助我知道我们是使用HTML还是XHTML作为文档类型，以便更好地理解这个问题。

尝试将外部JS的引用放在底部，就在结束正文标记的上方

乙二醇

这似乎解决了我的问题

，但我还是得到了一个空白页，如果我使用Chrome或FireFox，这都没有什么区别。小提琴可以用，你用吗？。。您的页面上可能还有其他内容？JSFIDLE对我来说很好用。但每当我试图在浏览器中打开文件时，它只显示一个空白页。它在控制台上给出此错误，未捕获类型错误：无法调用null的方法“match”。或者在Firebug上，类型错误：this.\u输入为null。

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

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