Summary¶

This example shows how to create a simple view for Mojito applications with Handlebars. Note that because Handlebars is a superset of Mustache, there is an overlap of some syntax and nomenclature.

Mojito views are template files that are rendered into HTML and served to a device. These template files are simply called templates in this example and throughout the Mojito documentation.

The following topics will be covered:

• adding a simple template
• Handlebars template basics
• passing data to the template

Implementation Notes¶

In the following screenshot, you see the HTML page that was rendered from the template.

In Mojito applications, the controller is responsible for passing data to the template. From the below code snippet taken from controller.server.js, you see the index function creating a data object and passing it to the done method. The done method called on ac, the ActionContext object, sends the data object to the template index.hb.html.

...
  index: function(ac) {
    var today = new Date(),
      data = {
        type : 'simple',
        time : { hours: today.getHours()%12, minutes: today.getMinutes()<10 ? "0" + today.getMinutes() : today.getMinutes(), period: today.getHours()>=12 ? "p.m." : "a.m."},
        show : true,
        hide : false,
        list : [{id: 2}, {id: 1}, {id: 3}],
        hole : null,
        html : "<h3 style='color:red;'>simple html</h3>"
      };
      ac.done(data);
    }
  };
...

In the index template of this code example, the properties of the data object are placed in Handlebars expressions that are evaluated by Mojito when the template is rendered. In Handlebars templates, the property names in double braces, such as {{type}}, are expressions.

The double braces with a pound are used for lists or conditional expression, such as {{#show}...{{/show}. Handlebars also has a built-in conditional structure that allow you to form the same conditional expression in the following way: {{#if show}}...{{/if}}

You also use double braces with a pound to access properties within an object, which is how the hours property of the time object is accessed here.

<div id="{{mojit_view_id}}" class="mojit">
  <h2 style="color: #606; font-weight:bold;">Simple View</h2>
  <div>type: {{type}}</div>
  <div>time: {{#time}}{{hours}}:{{minutes}} {{period}}{{/time}}</div>
  <div>show: {{#show}}{{type}}{{/show}}</div>
  <div>hide: {{#hide}}{{type}}{{/hide}}</div>
  <div>no show: {{^show}}{{type}}{{/show}}</div>
  <div>no hide: {{^hide}}{{type}}{{/hide}}</div>
  <div>list: {{#list}}{{id}}{{/list}}</div>
  <div>hole: {{^hole}}no list{{/hole}}</div>
  <div>html: {{{html}}}</div>
</div>

See the Handlebars expressions in the Handlebars documentation for more information.

Setting Up This Example¶

To set up and run simple_view:

1. Create your application.

   $ mojito create app simple_view

2. Change to the application directory.

3. Create your mojit.

   $ mojito create mojit simple

4. To specify that your application use the simple mojit, replace the code in application.json with the following:

   [
     {
       "settings": [ "master" ],
       "specs": {
         "simple" : {
           "type": "simple"
         }
       }
     }
   ]
   

5. To configure the routing for your application, replace the code in routes.json with the following:

   [
     {
       "settings": [ "master" ],
         "_simple_view": {
         "verbs": ["get"],
         "path": "/",
         "call": "simple.index"
       }
     }
   ]
   

6. Change to mojits/simple.

7. Modify the mojit controller to pass data to the view by replacing the code in controller.server.js with the following:

   YUI.add('simple', function(Y, NAME) {
     Y.namespace('mojito.controllers')[NAME] = {
   
       index: function(ac) {
         var today = new Date(),
         data = {
           type : 'simple',
           time : { hours: today.getHours()%12, minutes: today.getMinutes()<10 ? "0" + today.getMinutes() : today.getMinutes(), period: today.getHours()>=12 ? "p.m." : "a.m."},
           show : true,
           hide : false,
           list : [{id: 2}, {id: 1}, {id: 3} ],
           hole : null,
           html : "<h3 style='color:red;'>simple html</h3>"
         };
         ac.done(data);
       }
     };
   }, '0.0.1', {requires: []});
   

8. Modify your index template by replacing the code in views/index.hb.html with the following:

   <div id="{{mojit_view_id}}" class="mojit">
     <h2 style="color: #606; font-weight:bold;">Simple View</h2>
     <div>type: {{type}}</div>
     <div>time: {{#time}}{{hours}}:{{minutes}} {{period}}{{/time}}</div>
     <div>show: {{#show}}{{type}}{{/show}}</div>
     <div>hide: {{#hide}}{{type}}{{/hide}}</div>
     <div>no show: {{^show}}{{type}}{{/show}}</div>
     <div>no hide: {{^hide}}{{type}}{{/hide}}</div>
     <div>list: {{#list}}{{id}}{{/list}}</div>
     <div>hole: {{^hole}}no list{{/hole}}</div>
     <div>html: {{{html}}}</div>
   </div>
   

9. From the application directory, run the server.

   $ mojito start

10. To view your application, go to the URL below:

    http://localhost:8666

Source Code¶

• Mojit Controller
• Simple View Application