Needy Poetic Mothers

    mmm-vanillahogan

    0.2.1 • Public • Published

    mmm

    This is a fork of Jonathan Hawkes' mmm project. The only change is to depend on the original fork of Hogan.js rather than the Techhead fork.

    The original readme document follows:

    Mustache Marked Media - View Engine for Express 3, featuring Hogan.js

    Project mmm now prefers the TECHHEAD fork of Hogan.js.

    Supports

    • caching
    • partials
    • layout
    • presentation logic (outside of logicless template, of course)

    Install

    npm install mmm

    Usage

    Setup

    See example/app.js

    Add to your app configuration

    app.set('view engine', 'mmm');
    

    And if you want caching...

    app.enable('view cache'); // Express 3 will enable this by default for production environments
    

    To set an app-wide layout...

    app.set('layout', 'responsive-layout'); // will look for a layout named 'responsive-layout.mmm' in 'views' directory
    

    Rendering

    app.render('page', // will look for a file named 'page.mmm' in the 'views' directory
               vars);  // vars is expected to be a hash that will be merged onto app.locals
    
    // or for a response object (res)
    res.render('page', vars); // vars will be merged onto res.locals and app.locals
    

    Example:

    app.locals.a = 1;
    app.locals.b = 1;
    app.locals.c = 1;
    res.locals.a = 2;
    res.locals.b = 2;
    res.render('page', {a: 3});
    

    page.mmm

    {{a}} {{b}} {{c}}
    

    result:

    3 2 1
    

    Partials

    Partials may be explicitly set or automatically loaded from the file system.

    app.set('partials', { header: '<h1>App Name</h1>' }); // Define partial at the app level
    
    app.render('page', { partials: { menu: '<ul><li>item</li></ul>' } }); // Define partial at render
    

    page.mmm

    {{>header}}
    {{>menu}}
    {{>footer}}
    

    footer.mmm

    {{=<% %>=}}
    This template will be included in page.mmm automatically if {{>footer}} is not otherwise resolved.
    

    Layout

    A layout can be applied either to the entire application or at the call to render.

    app.set('layout', 'test');
    
    // or
    app.render('page', { layout:'test2' });
    
    // or
    app.render('page', { layout:false }); // Turn off layout
    

    Layout is implemented using partials. A layout should contain a partial named 'content'.

    The content will go here --> {{> content}}
    

    Presentation Logic

    Although Mustache provides a framework for logic-less templates, some presentation logic will usually be required in order for your view to render correctly. The 'logic', in this case, is just applied to the model before passing it on to the template for rendering, or special view 'helper' methods are attached to the context and these methods are called from the template. But where in your code this presentation logic appears is important when trying to maintain a proper SoC (Separation of Concerns) and in conforming to a MVC (Model-View-Controller) architecture.

    For example, consider the following controller:

    exports.controller = function(req, res) {
      var model = { date: new Date() };
    
      // Presentation Logic: View Helper Example
      model.formattedDate = function() {
        return this.date.toLocaleDateString();
      };
    
      // Presentation Logic: Pre-format View Model
      model.isoDate = model.date.toISOString();
    
      res.render('page', model);
    };
    

    This example is muddled because presentation logic (part of the View in MVC) is being add to the Controller. The Mustache Marked Media module (mmm) has an established pattern for "binding" such presentation logic to your view. Its use is, of course, completely optional. See the following example.

    page.mmm

    Today's date is {{formattedDate}}.
    

    page.mmm.js

    exports.formattedDate = function() {
      return this.date.toLocaleDateString();
    };
    

    ... or alternatively ...

    page.mmm.js

    module.exports = function(context) {
      context.formattedDate = context.date.toISOString();
      return context;
    };
    

    Keywords

    none

    Install

    npm i mmm-vanillahogan

    DownloadsWeekly Downloads

    1

    Version

    0.2.1

    License

    MIT

    Last publish

    Collaborators

    • philbooth