Omiting
Sometimes we want to omit the surrounding start and end tags but evaluating his contents. It can be done using data-omit-tag attribute. If we want to do this unconditionally:
sample.html<html> <body> <div data-define="user 'John'" data-omit-tag=""> <p> User: <span data-content="user">the user</span> </p> <p> Message: <span data-content="string: hello, ${user}!">hello, user!</span> </p> </div> </body> </html>
The resulting HTML will be:
<html> <body> <p> User: <span data-content="user">John</span> </p> <p> Message: <span data-content="string: hello, ${user}!">hello, John!</span> </p> </body> </html>
If we want to do this depending on a condition:
sample.html<html> <body> <div data-define="user 'John'" data-omit-tag="omitDiv"> <p> User: <span data-content="user">the user</span> </p> <p> Message: <span data-content="string: hello, ${user}!">hello, user!</span> </p> </div> </body> </html>
The above example will omit the div tag if the variable omitDiv evaluates to true
: rules to this are the same than conditional's
Replacing
The data-replace attribute is similar to data-content, but the first one removes the surrounding start and end tags:
sample.html<html> <body> <p> This is <span data-replace="title">the title</span> </p> </body> </html>
The resulting HTML will be:
<html> <body> <p> This is hello world! </p> </body> </html>
Drawbacks to omitting and replacing
These attributes are useful, but the impossibility of updating is an important drawback.
Let's see and example of a template:
<html> <body> <p> This is <span data-content="title">the title</span> </p> </body> </html>
The resulting HTML will be:
<html> <body> <p> This is <span data-content="title">hello world!</span> </p> </body> </html>
If we want to update the title:
dictionary.message = "bye, world!";
The updated resulting HTML will be:
<html> <body> <p> This is <span data-content="title">bye world!</span> </p> </body> </html>
Instead of using data-content
let's use data-replace
.
<html> <body> <p> This is <span data-replace="title">the title</span> </p> </body> </html>
The resulting HTML will be:
<html> <body> <p> This is hello world! </p> </body> </html>
But the highlighted line has not got any ZPT custom attribute yet! So this HTML code can not be udated anymore. The same problem occurs with data-omit-tag
.
In short, use these tags when no updating is needed. If you need updating avoid them, use data-content
and other custom attributes.