Two weeks ago we updated dhtmlxSuite to the version 4.1. This update introduced a new interesting function – dhtmlxTemplate. We decided to tell more about it in case if some of you haven’t tried to use it yet.
What is DHTMLX Template?
It is a function that allows using templates instead of fixed values. This means that you can have one and the same text which will have different dynamic parts (templates). You may use string, date or number templates or create your own one.
Where to use Template?
You can use templates in any texts that are identical in their structure and meaning, but should be different in some parts like names of the people to whom you address in the newsletter, tables with variety of data (date, telephone number, etc.), different views of one and the same object that can be switched on-the-fly (e.g., the grid of goods in online stores), and so on.
How to use Template?
Fistly, you should know a template format. The dynamic parts that are changed should be inframed by “#”, inside we have the name of a key from json object with additional params. These params are the names of the additional functions for formatting and their arguments.
In practice we have:
#key#
#key|function#
#key|function:param#
#key|function:param:param#
where: key is a key from json object the value of which will be taken, function parses value, using a built-in function or a user-defined one (optional), and param is a param for the function (optional, more than one param can be used).
4 simple steps to use DHTMLX Template
Step 1. Create a string that contains a template. E.g.:
Step 2. Specify values for the template.
Step 3. Apply dhtmlxTemplate function.
Step 4. Check the result.
In the example above we use a built-in function “date”. Among the other default template functions you may find:
lowercase – used to convert characters to lower case
uppercase – used to convert characters to upper case
maxlength – used for limiting the count of characters in a text
number_format – used for number formatting
Custom template function
As it was mentioned before, you can also create your own templates. For this, the following preparations precede the standard steps for using template.
Firts of all, we give a name for a new function. Our new function will change the color of the text and according to this, we’ll call it ‘text_color’.
Note that the first param is always a value, the second (and others) is a param that will be defined in the template. For the example above we only need a param for color:
After that there are the steps that are already familiar to you:
var values = {value: "Important!"};
var text = window.dhx4.template(str, values);
console.log(text); // <span style='color:red;'>Important!</span>
Online Book Shop with dhtmlxTemplate
The following demo is created to demonstrate how template simplifies the building of such an online store where different views can be easily switched.
With dhtmlxTemplate you can switch languages, book cover and the description of books on-the-fly. Check it by yourselves:
If you have any questions, feel free to leave them in the comments section below.