Markuper: The Opera Unite Service template library - Opera Developer Community

Description

Introduction

Markuper is a template library that provides an easy way to develop Opera Unite Services.

Usually, when developing an Opera Unite Service, you need to output all content through the WebServerResponse.write* functions. That can easily be turned into a cumbersome task when there’s a need to change the document produced—for instance, when the designer wants to revamp the layout of the page. It also violates abstraction layers, between logic and separation, unless you create your own functions to separate them.

The Markuper template library tries to solve these problems by using a specific syntax that developers can use to create bindings between JavaScript code and HTML documents. In this article I’ll show you how to use the most important features of this library.

The contents of this article are as follows:

My first template

How to include the library in the service

Outputting a simple HTML file

Using JavaScript variables in the Template

The Markuper is DOM-based

How to control presentation of HTML elements

Presentation logic

Binding HTML elements to JavaScript functions

Using data-* attributes

Transforming HTML into text

Listing and highlighting source code

Adding and removing HTML elements

data-list — Iterating through arrays/objects

data-remove/keep-if — Removing unwanted elements

data-import — Importing other templates

List of files

My first template

The easiest way to show the template library in action is to output a simple HTML file, something that can already be easily achieved by calling WebServerResponse.writeFile , but nevertheless a task that will demonstrate the library perfectly.

How to include the library in the service

Before going into coding, you first need to include the template library in your service — to do so, you must create a script tag in the base index.html file (or the file specified on the widgetfile tag of config.xml ), pointing to ...

Original URL

http://dev.opera.com/articles/view/markuper-unite-template-library/

http://dev.opera.com/articles/view/markuper-unite-template-library/