Creating and Using a View Engine Addon¶

Summary¶

This example shows how to install a third-party rendering engine (Embedded Javascript), create a view engine addon that uses the installed rendering engine, and create a template for the view engine. Mojito uses the Handlebars rendering engine by default.

The following topics will be covered:

• using npm to install the rendering engine
• creating a view engine addon
• using Embedded JavaScript (EJS) in the template

Implementation Notes¶

Before you create your application, you should take a look at the following sections to better understand how the application works. The focus here is to give you a practical example that you can use to add your own view engines and also to show some of important points of using view engines in Mojito applications. For more comprehensive but less hands-on documentation, see Developer Topics: View Engines.

node_modules
├── ejs/
│   ├── History.md
│   ├── Makefile
│   ├── Readme.md
│   ├── benchmark.js
│   ├── ejs.js
│   ├── ejs.min.js
│   ├── examples/
│   │   ├── client.html
│   │   ├── list.ejs
│   │   └── list.js
│   ├── index.js
│   ├── lib/
│   │   ├── ejs.js
│   │   ├── filters.js
│   │   └── utils.js
│   ├── package.json
│   ├── support/
│   │   └── compile.js
│   └── test/
│       ├── ejs.test.js
│       └── fixtures/
...

...

/**
* Renders the EJS template using the data provided.
* @method render
* @param {object} data The data to render.
* @param {string} mojitType The name of the mojit type.
* @param {string} tmpl The name of the template to render.
* @param {object} adapter The output adapter to use.
* @param {object} meta Optional metadata.
* @param {boolean} more Whether there will be more content later.
*/
render: function(data, mojitType, tmpl, adapter, meta, more) {
  var me = this,
  handleRender = function(output) {

    output.addListener('data', function(c) {
      adapter.flush(c, meta);
    });

    output.addListener('end', function() {
      if (!more) {
        adapter.done('', meta);
      }
    });
  };
  var result = ejs.render(this.compile(tmpl),data);
  console.log(result);
  adapter.done(result,meta);

},
...

...

compiler: function(tmpl) {
  return fs.readFileSync(tmpl, 'utf8');
}

<h2> <%= title %></h2>

<ul>
  <% for(var i=0;i<view_engines.length;i++){ %>
  <li><%= view_engines[i] %></li>
  <% } %>
</ul>

Setting Up this Example¶

To set up and run adding_view_engines:

1. Create your application.

   $ mojito create app adding_view_engines

2. Change to the application directory.

3. Create your mojit.

   $ mojito create mojit myMojit

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

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

5. Update your app.js with the following to use Mojito’s middleware, configure routing and the port, and have your application listen for requests:

   'use strict';
   
   var debug = require('debug')('app'),
       express = require('express'),
       libmojito = require('mojito'),
       app;
   
       app = express();
       app.set('port', process.env.PORT || 8666);
       libmojito.extend(app);
   
       app.use(libmojito.middleware());
   
       app.get('/status', function (req, res) {
           res.send('200 OK');
       });
       app.get('/', libmojito.dispatch('myMojit.default_ve'));
       app.get('/ejs', libmojito.dispatch('myMojit.added_ve'));
   
       app.listen(app.get('port'), function () {
           debug('Server listening on port ' + app.get('port') + ' ' +
           'in ' + app.get('env') + ' mode');
       });
       module.exports = app;
   

6. Confirm that your package.json has the correct dependencies as show below. If not, update package.json. Notice that we’re adding the ejs module for rendering embedded JavaScript (EJS) templates.

   "dependencies": {
       "debug": "*",
        "mojito": "~0.9.0"
   },
   "devDependencies": {
       "ejs": "*",
       "mojito-cli": ">= 0.2.0"
   },
   

7. From the application directory, install the application dependencies:

   $ npm install

8. Create the addons directory for your view engine addon.

   $ mkdir -p addons/view-engines

9. Change to the addons/view-engines directory that you created.

10. Create the view engine addon file ejs.server.js with the following code:

    YUI.add('addons-viewengine-ejs', function(Y, NAME) {
    
      var ejs = require('ejs'),
      fs = require('fs');
      function EjsAdapter(viewId) {
        this.viewId = viewId;
      }
      EjsAdapter.prototype = {
    
        render: function(data, mojitType, tmpl, adapter, meta, more) {
          var me = this,
          handleRender = function(output) {
    
                    output.addListener('data', function(c) {
                      adapter.flush(c, meta);
                    });
                    output.addListener('end', function() {
                      if (!more) {
                        adapter.done('', meta);
                      }
                    });
                  };
                  Y.log('Rendering template "' + tmpl + '"', 'mojito', NAME);
                  var result = ejs.render(this.compiler(tmpl),data);
                  console.log(result);
                  adapter.done(result,meta);
                },
                compiler: function(tmpl) {
                  return fs.readFileSync(tmpl, 'utf8');
                }
              };
              Y.namespace('mojito.addons.viewEngines').ejs = EjsAdapter;
    }, '0.1.0', {requires: []});
    

11. Change to the adding_view_engines/mojits/myMojit directory.

12. Replace the code in controller.server.js with the following:

    YUI.add('mymojit', function(Y, NAME) {
    
      Y.namespace('mojito.controllers')[NAME] = {
    
        default_ve: function(ac) {
          ac.done({
            "title": "Handlebars at work!",
            "view_engines": [
              {"name": "EJS"},
              {"name": "Jade"},
              {"name": "dust"},
              {"name": "underscore" }
            ],
            "ul": { "title": 'Here are some of the other available rendering engines:' },
          });
        },
        added_ve: function(ac) {
          ac.done({
            "title": "EJS at work!",
            "view_engines": [ "Jade", "Dust","underscore" ],
            "ul": { "title": 'In addition to Handlebars and EJS, you can also use these rendering engines:' }
          });
        }
      };
    }, '0.0.1', {requires: ['mojito', 'mymojit-model-foo']});
    

13. Create the template views/default_ve.hb.html that uses Handlebar expressions with the following:

    <h2></h2>
    <div id="">
      <h3>
        Besides Handlebars, here are some other rendering engines:
      </h3>
      <ul>
      </ul>
    </div>
    

14. Create the template views/added_ve.ejs.html that uses EJS with the following:

    <h2> <%= title %></h2>
    <div id=<%= mojit_view_id %>>
      <h3><%= ul.title %></h3>
      <ul>
        <% for(var i=0;i<view_engines.length;i++){ %>
        <li><%= view_engines[i] %></li>
        <% } %>
      </ul>
    </div>
    

15. From your application directory, start Mojito.

    $ node app.js

16. Open the following URL in your browser to see the template rendered by the Handlebars rendering engine.

    http://localhost:8666/

17. Now see the template rendered by the EJS rendering engine at the following URL:

    http://localhost:8666/ejs

18. Great, your application is using two different rendering engines. You should now be ready to add your own view engine that uses a rendering engine such as Jade.

Source Code¶

• View Engines
• View Engine Addon
• Templates