Initial Handlebars.js None Functionality

I'm trying to learn Handlebars.js (first hour) & seem to be hitting an initial problem (it isn't working).

Here is my 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>

Here is my 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: "[email protected]"
        }, {
            username: "allison",
            firstName: "Allison",
            lastName: "House",
            email: "[email protected]"
        }, {
            username: "ryan",
            firstName: "Ryan",
            lastName: "Carson",
            email: "[email protected]"
        }]
    };
    $("#content-placeholder").html(template(data));
});

I'm seeing the console log, but the table is not being written at all. There are no console error messages & I'm a bit stuck as to where the snag is.

Hopefully it is not tiredness causing something obvious like a typo...

Solution

To make your code work as you have it, you need to define an HTML element in your document that matches #content-placeholder so that $("#content-placeholder").html(template(data)); has a place to put the rendered template.

You could solve that by adding it to your HTML like this:

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