Nutella Peanut-Butter Marshmallow

    html-template

    1.2.2 • Public • Published

    html-template

    build templates with ordinary html for node and browsers

    Write plain html and use css selectors to modify the html.

    build status

    example

    Put template= attributes on the elements you want to turn into templates.

    Here we'll make a template called "skill" on a <tr>:

    <html>
      <body>
        <h1>list of skills</h1>
        <table class="skill">
          <tr>
            <th>skill name</th>
            <th>skill level</th>
          </tr>
          <tr template="skill">
            <td key="name"></td>
            <td key="level"></td>
          </tr>
        </table>
        <script src="bundle.js"></script> 
      </body>
    </html>

    in node

    In node we can do:

    var template = require('html-template');
    var fs = require('fs');
     
    var html = template();
    var skills = html.template('skill');
    fs.createReadStream(__dirname + '/skills.html')
        .pipe(html)
        .pipe(process.stdout)
    ;
     
    skills.write({
        '[key=name]': 'macaroni pictures',
        '[key=level]': '40%'
    });
    skills.write({
        '[key=name]': 'quilting',
        '[key=level]': '5000%'
    });
    skills.write({
        '[key=name]': 'blinky lights',
        '[key=level]': '50%'
    });
    skills.end();

    to produce:

    <html>
      <body>
        <h1>list of skills</h1>
        <table class="skill">
          <tr>
            <th>skill name</th>
            <th>skill level</th>
          </tr>
          <tr template="skill" style="display:none">
            <td key="name"></td>
            <td key="level"></td>
          </tr><tr>
            <td key="name">macaroni pictures</td>
            <td key="level">40%</td>
          </tr><tr>
            <td key="name">quilting</td>
            <td key="level">5000%</td>
          </tr><tr>
            <td key="name">blinky lights</td>
            <td key="level">50%</td>
          </tr>
        </table>
        <script src="bundle.js"></script> 
      </body>
    </html>

    in browsers

    In the browser, do:

    var html = require('html-template')();
    var skills = html.template('skill');
     
    skills.write({
        '[key=name]': 'tap dancing',
        '[key=level]': '15%'
    });
    skills.write({
        '[key=name]': 'baton twirling',
        '[key=level]': '95%'
    });

    and new elements will be generated dynamically.

    node methods

    var template = require('html-template')
    

    var html = template()

    Create a new html template stream html that takes html input with template attributes and produces html output with expanded template data.

    var t = html.template(name, opts)

    Load a template t by its template name in the html.

    Optionally:

    • opts.include - when false, do not include the original template in the html output. Otherwise include the original template with style="display:none" so the template can be loaded in the browser to create additional output.

    t.write(row)

    Write row, an object mapping css selector keys to hyperglue-style values, to the output stream.

    browser methods

    var template = require('html-template')
    var streamTemplate = require('html-template/stream')
    

    var html = template()

    Create a new html instance.

    var t = html.template(name)

    Load a template t by its template name in the html.

    t.write(row)

    Write a hyperglue-style object mapping css selectors to attributes and content to the page.

    var elem = t.create(row)

    Create a hyperglue-style object mapping without inserting the element elem to the DOM.

    var html = streamTemplate()

    Create an html that will create real stream template (t)s.

    install

    With npm do:

    npm install html-template
    

    license

    MIT

    Install

    npm i html-template

    DownloadsWeekly Downloads

    1

    Version

    1.2.2

    License

    MIT

    Last publish

    Collaborators

    • nopersonsmodules