Markuper (HTML templates)

Basically, the templating is the same as most of templating languages:

1. You define a template file (let's say test.html):

<h1>{{title}} wrote this!</h1>

2. You make a dictionary of data:

var data = {};
data['title'] = 'Markuper'

3. You call Markuper:

var template = new Markuper( 'templates/tutorial.html', data );

The {{title}} is replaced with "Markuper", giving us:

<h1>Markuper wrote this!</h1>

4. You write it to response:

function handleRequest(r) {
   // ... html generation here
   var o = r.connection.response;
   o.write( template.parse().html() );
   o.close();
}

render_to_response shortcut

If you define this:

markuper.Template.prototype.render_to_response = function(connection) {
    connection.response.write( this.parse().html() );
    connection.response.close();
}

you can replace the above lines with:

function handleRequest(r) {
   // ... html generation here
   template.render_to_response(r.connection);
}

templates/ is a directory where your application is (where config.xml is).

The docs aren't clear on this, but it might also be possible that you need to enable "fileio" library.

If you need to output data['foo']['bar'], then you write {{foo.bar}}

XPath / CSS manipulation

It's also possible to manipulate the template from the object:

As docs say:

var span = template.xpath( "//div[@id='div1']/span[1]" )[0];
span.parentNode.removeChild( span );

will remove first <span> under <div id="div1">. See xpath examples →.

Or you can use CSS selectors:

var span = template.select( "#div1 > span" )[0];
span.parentNode.removeChild( span );

This is really awesome. Combined with server-side jQuery this can be a lot of fun.

for loop

There is no {for}, but there data-list attribute (which is kind of hard to understand. The way I see it - if data['cities'] is a list of dictionaries, then you could say:

<li data-list="cities">
  {{cities[].city}}: {{cities[].temperature}} degrees
</li>

if condition

There is no {if}, but there is data-remove-if attribute:

<div data-remove-if="false">THIS WILL BE REMOVED</div>
<p data-keep-if="hasReadAccess || isAdmin">very important info</p>

Which asks for (data['hasReadAccess'] || data['isAdmin']), if it's true - then inside HTML is kept. Awesome!

<? include() ?> / {extends}

Instead of include('file'), you use data-import="..." attribute.

<div data-import="templates/header.html"></div>
main content here
<div data-import="templates/footer.html"></div>

The imported templates will be parsed too.

data-*

You can create your own custom handler for data-[anything]:

<div data-my-browser="Opera">
   Yay!
</div>

then you do:

template.registerDataAttribute('my-browser', function(node, data, key) {
    if( key.match(/Opera/is) ) {
        // ... node is current HTML tag (DOM node), so you can do anything
        // you would do in regular JavaScript
        node.textContent = node.textContent + '<br>Great!';
    };
});

Official docs

See here: docs → and example →

The "Example" shows a number of other (more complex) usages, like loading source code and quoting data.

Slava V. [about me]

← main page

Last updated