Question

我实际上是想在Handlebar.js＆amp;上找到一些教程。我找到了这个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>。

fiddle here

Answer 2

您可能想查看此question的答案似乎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>
    <ul></ul>
   <!-- last thing on the page--> 
   <script src="app.js" type="text/javascript"></script>
</body>

这似乎已经为我解决了

使用Handlebar.js

3 个答案: