ractive-engine

    0.1.1 • Public • Published

    ractive-engine

    Template engine for node.js with Ractive.js.

    Features like

    are supported. Actually they are the same thing.

    Install

    npm i ractive-engine --save

    API

    // the default export engine
    // instance of RactiveEngine with default options
    var ractive = require('ractive-engine');
     
    // RactiveEngine class definition
    var RactiveEngine = require('ractive-engine').RactiveEngine;
     
    // Ractive class used by this library
    var Ractive = require('ractive-engine').Ractive;

    ractive.renderFile

    ractive.renderFile(viewPath,locals) => result

    It's synchronous,but view cache will be auto enabled when NODE_ENV set to production.

    RactiveEngine class options

    • enableCache : whether enable view cache, if not specify explicitly , it's decided by NODE_ENV === production

    • ext : extension of view file,for engine look up files when ignore extension, defaults to .html

    • layoutRoot : where to find layouts

      • {{extend './main'}}, ./main is relative to the file.

      • {{#extend main}}{{/extend}}, layoutRoot is required here and layout resolve to <layoutRoot>/main

    • partialRoot : where to find partials

      • {{>partials.some.partial}} partialRoot is required here,since it's built in Ractive , Use {{#include relativePath}},will resolve to <partialRoot>/partials/some/partial>

      • {{#include './partials/some/partial'}} It's same to use {{>...}},but this can include a relative path

    express support

    // app is express app
    app.engine('.html',require('ractive-engine').express(options));

    Syntaxs

    extend

    {{#extend someLayout}}
    {{/extend}}

    block

    {{#block body}}
    {{/block}}
    {{#prepend someBlock}}
    {{/prepend}}
    {{#append someBlock}}
    {{#/append}}

    It's processed recursivly,that's same to jade's behavior.

    for example:

    layout.html

    <html>
    <head><title>{{#block title}}{{/block}}</title></head>
    <body>
        <header>
        {{#block header}}
        {{/block}}
        </header>
        
        <div>
        {{#block body}}
        </div>
        
        <footer>
        {{#block footer}}
        {{/block}}
        </footer>
    </body>
    </html>

    index.html

    {{#extend './layout'}}
    {{/extend}}
     
    {{#block title}}
    I'm the title
    {{/block}}
     
    {{#block header}}
    I will be the header.
    {{/block}}
     
    {{#block body}}
    I'll be in body.
    {{/block}}
     
    {{#block footer}}
    I will be the footer
    {{/block}}

    will get

    <html>
    <head><title>I'm the title</title></head>
    <body>
        <header>
        I will be the header.
        </header>
        
        <div>
        I'll be in body.
        </div>
        
        <footer>
        I will be the footer
        </footer>
    </body>
    </html>

    Other Ractive support syntax

    check http://docs.ractivejs.org/latest/templates

    TODO

    • upgrade Ractive to v0.7.x
    • add some benchmark

    License

    the MIT License http://magicdawn.mit-license.org

    Install

    npm i ractive-engine

    DownloadsWeekly Downloads

    15

    Version

    0.1.1

    License

    MIT

    Last publish

    Collaborators

    • magicdawn