6

我实际上是想在 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));

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

4

3 回答 3

3

"ul"元素不存在，你必须将它附加到实际存在的东西上。

只需<ul></ul>在身体的某个地方添加一个。

在这里摆弄

于 2012-09-04T17:01:57.260 回答
0

您可能想检查这个问题的答案 似乎 jquery 函数无法访问该元素，因为在调用之前没有加载 DOM。仅在加载有效的 DOM 之后调用 app.js 代码（不将其包装在函数中）的初始更改之后，我尝试了更多组合。例如，我将脚本调用移到了</body>它的工作之前。

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

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

于 2012-09-27T22:23:01.627 回答
0

尝试将 ref 放在底部的外部 JS 中，就在结束 body 标记的上方

例如

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

这似乎已经为我解决了

于 2013-10-22T15:43:54.927 回答