Page created:
Jun 16, 2009 (? ago)
Last modified ? ago
To main page | Opera Unite HowTo's

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


  1. Markuper (HTML templates)
  2. .ua
  3. Opera Unite HowTo's
  4. .us (files)
  5. Distribute Your Application
  6. 24/7 sites (permanent applications - idea) [stub]
  7. Issues
  8. HTTP Connections (AJAX/REST)
  9. Cookies
  10. file_wrap.js - File Wrapper
  11. Basic HowTo: Simple app (tutorial)
  12. Static images, client-side scripts
  13. Application Examples
  14. How to Debug Opera Unite apps
  15. Persistence & databases
  16. Opera Unite benchmark
  17. From PHP to Opera Unite
  18. Uniteness (Framework)
  19. Config.xml
  20. Key-value storage
  21. Widget Object
  22. Notifications (Growl'esque)
  23. Reset (debug)
  24. Cron example
  25. What I meant by CNAMEs
  26. Wish List
  27. Device Unavailable
  28. StopLorem (Opera Unite blogging)
  29. uniteness-0.11
  30. GET/POST data
  31. CRUD And Static (example)
  32. Opera object
  33. URLs
  34. Headers & Redirects
  35. Error Console
  36. JSON State (storing data)
  37. Security
  38. /storage/ (in fileio)
  39. Yusef library
  40. unite_info (a-la php_info)
  41. Javascript Imports
  42. onunload / _close
  43. fileio: Sandboxed Filesystem
  44. Request Hierarchy (like php_info)
  45. Intro: Web Apps with Opera Unite