初始 Handlebars.js None 功能

Question

我正在尝试学习 Handlebars.js（第一个小时）并且似乎遇到了最初的问题（它不起作用）。

这是我的 html:

<!doctype html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
    <script src="js/handlebars-v4.0.5.js"></script>
    <script src="js/main.js"></script>
</head>

<body>
    <p>Hi!</p>
    <script id="some-template" type="text/x-handlebars-template">
        <table>
            <thead>
                <th>Username</th>
                <th>Real Name</th>
                <th>Email</th>
            </thead>
            <tbody>
                {{#users}}
                <tr>
                    <td>{{username}}</td>
                    <td>{{firstName}} {{lastName}}</td>
                    <td>{{email}}</td>
                </tr>
                {{/users}}
            </tbody>
        </table>
    </script>
</body>

</html>

这是我的 main.js:

$(document).ready(function() {
    console.log("I'm Here!");
    var source = $("#some-template").html();
    var template = Handlebars.compile(source);
    var data = {
        users: [{
            username: "alan",
            firstName: "Alan",
            lastName: "Johnson",
            email: "alan@test.com"
        }, {
            username: "allison",
            firstName: "Allison",
            lastName: "House",
            email: "allison@test.com"
        }, {
            username: "ryan",
            firstName: "Ryan",
            lastName: "Carson",
            email: "ryan@test.com"
        }]
    };
    $("#content-placeholder").html(template(data));
});

我正在查看控制台日志，但根本没有写入 table。没有控制台错误消息，我有点不知道问题出在哪里。

希望不是疲劳导致了一些明显的打字错误...

Answer 1

我变了

$("#content-placeholder").html(template(data));

至

$('body').append(template(data));

& 我得到了想要的输出。

Answer 2

为了使您的代码按您的方式工作，您需要在文档中定义一个与 #content-placeholder 匹配的 HTML 元素，以便 $("#content-placeholder").html(template(data)); 有一个地方来放置呈现的模板。

您可以通过将其添加到您的 HTML 来解决这个问题：

<!doctype html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
    <script src="js/handlebars-v4.0.5.js"></script>
    <script src="js/main.js"></script>
</head>

<body>
    <p>Hi!</p>
    <script id="some-template" type="text/x-handlebars-template">
        <table>
            <thead>
                <th>Username</th>
                <th>Real Name</th>
                <th>Email</th>
            </thead>
            <tbody>
                {{#users}}
                <tr>
                    <td>{{username}}</td>
                    <td>{{firstName}} {{lastName}}</td>
                    <td>{{email}}</td>
                </tr>
                {{/users}}
            </tbody>
        </table>
    </script>

    <!-- Add this line -->
    <div id="content-placeholder"></div>
</body>

</html>

初始 Handlebars.js None 功能

Initial Handlebars.js None Functionality

javascript

jquery

handlebars.js