CODEWITHSUNDEEP
javascripttemplateshandlebars.js
codeman
codeman

Reputation: 47

handlebars.js doesnt render document

I ve got a problem with handlebars.js. perhaps it is totally trivial but i am also totally new in handlebars. So...here is sample code in my index.html which goes like this:

    <!DOCTYPE html>

    <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
    <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
    <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
    <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
        <head>

            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            <title></title>

            <meta name="description" content="">
            <meta name="viewport" content="width=device-width">
            <script data-main="scripts/main" src="scripts/require.js"></script>
            <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

            <link rel="stylesheet" href="css/normalize.css">
            <link rel="stylesheet" href="css/main.css">
            <script src="scripts/modernizr-2.6.2.min.js"></script>


            <script src='scripts/content.js'></script>
            <script src='scripts/handlebars-1.0.0-rc.4.js'></script>
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
            <script>window.jQuery || document.write('<script src="scripts/jquery-1.9.1.min.js"><\/script>')</script>
            <script src="scripts/plugins.js"></script>
            <script src="scripts/main.js"></script>


        </head>

        <body>

            <!--[if lt IE 7]>
                <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
            <![endif]-->

            <!-- Add your site or application content here -->

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

And there is also this content.js file which contains simple javascript code but it still doesnt work. If any of you could advise or give solution i'd be very thankful. Thank you in advance

 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));

Best regards

Upvotes: 0

Views: 3062

Answers (2)

Gabe
Gabe

Reputation: 11

Unless you created a custom block helper iterator called "users" then the following block will not execute which would be why nothing is visible when you attempt to render your template.

Incorrect Block Helper Iterator:

{{#users}}
   ...
{{/users}}

Based on the data you gave in your example you should do the following:

Correct Block Helper Iterator:

{{#each user}}
   My name is {{this.firstname}} {{this.lastname}} and my email is {{this.email}}.
{{/each}}

You can reference block helpers on the Handlebarsjs documentation site. It might be a little challenging to digest at first, but play around a bit and you will start to learn some of the Handlebarsjs features.

Upvotes: 1

Pointy
Pointy

Reputation: 413996

  1. You're importing your "content.js" script before you import jQuery.

  2. The code in that script should be wrapped in a jQuery "ready" handler:

     $(function() {
    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));
 });

The first problem would cause an error to be logged in your browser's console. That's something you should always check first.

Upvotes: 0

Related Questions