Typos
Take a look at this template:
sample.html<html> <body> <p> This is <span data-content="tite">the title</span>. </p> </body> </html>
Now we declare the dictionary and invoke ZPT:
sample.js"use strict"; var zpt = require( 'zpt' ); var dictionary = { title: "hello world!" }; zpt.run({ root: document.body, dictionary: dictionary });
The expected HTML is:
<html> <body> <p> This is <span data-content="tite">hello world!</span> </p> </body> </html>
But the resulting HTML is:
<html> <body> <p> This is <span data-content="tite">undefined</span> </p> </body> </html>
But... what happened? We added a variable called title to the dictionary but we used a variable called tite in the template. As this variable is not defined its value is undefined
:
<html> <body> <p> This is <span data-content="tite">the title</span>. </p> </body> </html>
The solution: declaring variables
ZPT-JS makes it easy to declare variables. Take a look at this template:
sample.html<html> <body> <p data-declare="required title string"> This is <span data-content="tite">the title</span>. </p> </body> </html>
We have used data-declare statement to declare the title variable as a not undefined string (if a variable is required an undefined
value is not valid and an error occurs). Also, this p node now works in strict mode: all variables inside it must be declared. So, if ZPT-JS finds a non declared variable an error occurs.
If an error occurs ZPT-JS stop processing the nodes and show the error (using a javascript alert
by default).
Checking types
Sometimes it is useful to declare types to force ZPT-JS to check them. To force a variable is a number:
sample.html<html> <body> <p data-declare="a number"> A number + 1: <span data-content="+: a 1">a + 1</span>. </p> </body> </html>
If the value of a is not a valid number an error occurs.
For more details about types see the reference about data-declare.
Default values
It is easy to declare default values. Any ZPT-JS expression is valid. To set 10
and 20
as default values:
<html> <body> <p data-declare="a number 10; b number 20"> Adding... <span data-content="+: a b">a + b</span>. </p> </body> </html>
So if a or b are undefined
ZPT-JS will set them to their default values.