Question

我试图学习Handlebars.js（第一小时）＆amp;似乎正在遇到一个初始问题（它不起作用）。

这是我的HTML：

org.jboss

这是我的main.js：

<!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>

我看到了控制台日志，但桌子根本没有写入。没有控制台错误消息＆amp;我有点陷入障碍的地方。

希望它不会导致像拼写错误那样明显的疲倦...

Answer 1

要使代码正常工作，您需要在文档中定义与#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>

Answer 2

我改变了

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

到

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

＆安培;我得到了理想的输出。

Initial Handlebars.js无功能

2 个答案: