Domplate

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
(Description of Domplate)
(Added some examples borrowed from Honza's website)
Line 1: Line 1:
Domplate is a JavaScript template system. It allows you to speed up UI development by offering special functions for creating HTML elements and event handlers bound to it.
Domplate is a JavaScript template system. It allows you to speed up UI development by offering special functions for creating HTML elements and event handlers bound to it.
 +
 +
Domplate basically consists of three parts:
 +
* '''Domplate Script:''' the script used to describe the Domplate template
 +
* '''Input Data (object):''' input data for a dynamic template
 +
* '''CSS:''' set of CSS rules used by result DOM
To try out Domplate you can use the [http://www.softwareishard.com/domplate/runner/index.php Domplate Runner] written by [[User:Honza|Jan "Honza" Odvarko]]. He also wrote some tutorials about Domplate available at [http://www.softwareishard.com/blog/category/domplate/ his website]. Also Christoph Dorn gives an introspective into Domplate at [http://www.christophdorn.com/Blog/category/domplate/ his blog].
To try out Domplate you can use the [http://www.softwareishard.com/domplate/runner/index.php Domplate Runner] written by [[User:Honza|Jan "Honza" Odvarko]]. He also wrote some tutorials about Domplate available at [http://www.softwareishard.com/blog/category/domplate/ his website]. Also Christoph Dorn gives an introspective into Domplate at [http://www.christophdorn.com/Blog/category/domplate/ his blog].
Line 7: Line 12:
* User-defined callbacks to iterate and format data
* User-defined callbacks to iterate and format data
* Object oriented design allows for advanced hierarchies  
* Object oriented design allows for advanced hierarchies  
 +
 +
== Examples ==
 +
 +
The examples listed here should give you a point were to start at. For more examples please visit [http://www.softwareishard.com/blog/category/domplate/ Jan Odvarko's website].
 +
 +
=== Hello World! ===
 +
The very first example shows basic steps you need to do to define and execute a template.
 +
 +
<pre>
 +
var template = domplate(
 +
{
 +
    tag:
 +
        DIV("Hello World!"),
 +
});
 +
 +
template.tag.replace({}, parentNode, template);
 +
</pre>
 +
 +
Notice that the template is created with the <code>domplate<code> function and contains one <code>tag</code> definition. The tag consists of one <code>DIV</code> constructor (a function).
 +
In order to execute the template, the example uses a <code>replace</code> method (there are other methods yet) and passes an input object (empty in this case), parent DOM node (where the result should be inserted) and scope object (the template itself) into it.
 +
 +
=== How to use input data ===
 +
 +
This example shows how an input object can be used to provide dynamic data for a template.
 +
 +
<pre>
 +
var inputObject = {
 +
    firstName: "Jan",
 +
    lastName: "Odvarko"
 +
};
 +
 +
var template = domplate(
 +
{
 +
    tag:
 +
        DIV(
 +
            SPAN("First Name: "),
 +
            SPAN("$object.firstName"),
 +
            BR(),
 +
            SPAN("Last Name: "),
 +
            SPAN("$object.lastName")
 +
        )
 +
});
 +
 +
template.tag.replace({object: inputObject}, parentNode, template);
 +
</pre>
 +
 +
The template refers to a property of the input object using a "$" character at the beginning of the property name. Standard dot notation is used to access inner properties. The actual value from the object is used when the template is executed.
 +
 +
=== How to construct a FOR Loop ===
 +
 +
This example shows how to use a <code>FOR</code> loop and iterate array of input objects.
 +
 +
<pre>
 +
var inputArray = ["red", "green", "blue", "white"];
 +
 +
var template = domplate(
 +
{
 +
    tag:
 +
        FOR("item", "$array",
 +
          DIV("$item")
 +
        )
 +
});
 +
 +
template.tag.replace({array: inputArray}, parentNode, template);
 +
</pre>
 +
 +
A loop is constructed using a <code>FOR</code> constructor, which expects two parameters. The first one defines a variable, which contains the actual value from the array in each cycle and the second one is the array to be iterated.
 +
 +
=== How to handle a DOM event ===
 +
 +
This example shows how to register an event handler.
 +
 +
<pre>
 +
var inputArray = ["red", "green", "blue", "white"];
 +
 +
var template = domplate(
 +
{
 +
    tag:
 +
        FOR("item", "$array",
 +
            DIV({onclick: "$handleClick"},
 +
 +
              "$item"
 +
            )
 +
        ),
 +
 +
    handleClick: function(event)
 +
    {
 +
 +
        alert(event.target.innerHTML);
 +
    }
 +
});
 +
 +
template.tag.replace({array: inputArray}, parentNode, template);
 +
</pre>
 +
 +
The template registers a handler for every generated <code>&lt;div&gt;</code> element, that shows an alert box with the content of the clicked element. Notice that the scope object (which is usually the template itself) is used to execute the <code>handleClick</code> function.
 +
 +
If the constructor's attribute name begins with "on", it's treated as an event name (without "on") for the correspondend DOM event. It's value must always be a function, that is registered as the event listener.
== Links ==
== Links ==

Revision as of 10:09, 6 May 2011

Domplate is a JavaScript template system. It allows you to speed up UI development by offering special functions for creating HTML elements and event handlers bound to it.

Domplate basically consists of three parts:

  • Domplate Script: the script used to describe the Domplate template
  • Input Data (object): input data for a dynamic template
  • CSS: set of CSS rules used by result DOM

To try out Domplate you can use the Domplate Runner written by Jan "Honza" Odvarko. He also wrote some tutorials about Domplate available at his website. Also Christoph Dorn gives an introspective into Domplate at his blog.

Contents

Features

  • Templates are assembled via function calls instead of strings
  • User-defined callbacks to iterate and format data
  • Object oriented design allows for advanced hierarchies

Examples

The examples listed here should give you a point were to start at. For more examples please visit Jan Odvarko's website.

Hello World!

The very first example shows basic steps you need to do to define and execute a template.

var template = domplate(
{
    tag:
        DIV("Hello World!"),
});

template.tag.replace({}, parentNode, template);

Notice that the template is created with the domplate<code> function and contains one <code>tag definition. The tag consists of one DIV constructor (a function). In order to execute the template, the example uses a replace method (there are other methods yet) and passes an input object (empty in this case), parent DOM node (where the result should be inserted) and scope object (the template itself) into it.

How to use input data

This example shows how an input object can be used to provide dynamic data for a template.

var inputObject = {
    firstName: "Jan",
    lastName: "Odvarko"
};

var template = domplate(
{
    tag:
        DIV(
            SPAN("First Name: "),
            SPAN("$object.firstName"),
            BR(),
            SPAN("Last Name: "),
            SPAN("$object.lastName")
        )
});

template.tag.replace({object: inputObject}, parentNode, template);

The template refers to a property of the input object using a "$" character at the beginning of the property name. Standard dot notation is used to access inner properties. The actual value from the object is used when the template is executed.

How to construct a FOR Loop

This example shows how to use a FOR loop and iterate array of input objects.

var inputArray = ["red", "green", "blue", "white"];

var template = domplate(
{
    tag:
        FOR("item", "$array",
           DIV("$item")
        )
});

template.tag.replace({array: inputArray}, parentNode, template);

A loop is constructed using a FOR constructor, which expects two parameters. The first one defines a variable, which contains the actual value from the array in each cycle and the second one is the array to be iterated.

How to handle a DOM event

This example shows how to register an event handler.

var inputArray = ["red", "green", "blue", "white"];

var template = domplate(
{
    tag:
        FOR("item", "$array",
            DIV({onclick: "$handleClick"},

               "$item"
            )
        ),

    handleClick: function(event)
    {

        alert(event.target.innerHTML);
    }
});

template.tag.replace({array: inputArray}, parentNode, template);

The template registers a handler for every generated <div> element, that shows an alert box with the content of the clicked element. Notice that the scope object (which is usually the template itself) is used to execute the handleClick function.

If the constructor's attribute name begins with "on", it's treated as an event name (without "on") for the correspondend DOM event. It's value must always be a function, that is registered as the event listener.

Links

Personal tools