Using Handlebar.js with Codenvy

Discover handlebars.js with Codenvy Factory:


Handlebars.js is a client-side javascript templating system that has 3 different parts. It uses expressions, data, and a compiler that processes the data from the object into the HTML template. Handlebars.js is used by several other javascript libraries such as ember.js, backbone.js, and underscore.js. This tutorial will walk you through how to utilize Handlebar.js with Codenvy. To use Handlebar.js you will need to also have jquery loaded into your page.

Download the Javascript Libraries

jquery

You can go here and download Jquery. It loads the compiled data into the selected HTML element.

handlebars-logo

Next you need to download the handlebars.js library which can be found here. Both of these libraries will be needed to import into our project to run our code.

Start a Codenvy Project

In the Welcome tab or under the Project menu item at the top, select “new project”. For this example we will use a PHP project and select “None” for PaaS deployment.

screen-shot-1

Load the Libraries

Once the project has opened, create a folder and label it “js”. Next you will want to load the javascript libraries that you have downloaded. Both the Jquery and Handlebars.js. With the js folder you created selected go to FileUpload File… and then select the javascript libraries.

screen-shot-2

Setup your Handlebars.js Template

Goto your index.php page and link to the two libraries you have just uploaded under the js folder.

<script src="/js/jquery.min.js"> </script>
<script src="/js/handlebars.js"> </script>

Next you will add your Handlebars.js template within thetag.

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

Within thetag please add the following.

<div id="content"></div>

Set Variables and Declare an Object

Next we need set variables for the content to make our Javascript easier to interpret. Copy the code below after your closing

tag and before the closing tag.

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" }
    ]};

The variable “source” defines the template that we setup earlier in the project in thetag. The variable “template” calls to the Handlebars.js method that compiles the template and the variable “data” defines the object information that we are loading into the template.

Compile and Load

After you have declared these variables, within the same script tag add the jquery that will load the following data to output into the div tht you created earlier. Copy the code below.

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

Final Code and Run

Your final code should look like this.

<html>
  <head>
     <title>Handlebars.js Demo</title>
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script>
      <script src="/js/handlebars.js"> </script>
     <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>

  </head>
  <body>
      <div id="content"></div>
  </body>
  <script>
  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").html(template(data));
  </script>
</html>

Now you can goto Run in the menu and select Run Application.

Your result should look like this.

screen-shot-3