zpt
Version:
Zenon Page Templates - JS (ZPT-JS)
203 lines (183 loc) • 6.96 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Omiting and replacing</title>
<script type="text/javascript" src="../lib/zpt.min.js" defer></script>
<script type="text/javascript" src="../js/zpt.js" defer></script>
<script type="text/javascript" src="../lib/syntaxHighlighter/lib.js"></script>
<link rel="stylesheet" type="text/css" href="../docs.css">
<link rel="stylesheet" type="text/css" href="../lib/syntaxHighlighter/theme.css">
</head>
<body>
<div data-use-macro="'page@templates.html'">
<div data-fill-slot="'page-header'">
<h1>ZPT-JS tutorial - Omiting and replacing</h1>
<ul>
<li><a href="#omit">Omiting</a>.</li>
<li><a href="#replace">Replacing</a>.</li>
<li><a href="#drawbacks">Drawbacks to omitting and replacing</a>.</li>
</ul>
</div>
<article data-fill-slot="'article'">
<h2 data-attributes="id 'omit'">Omiting</h2>
<p>
Sometimes we want to omit the surrounding start and end tags but evaluating his contents. It can be done using <em>data-omit-tag</em> attribute. If we want to do this unconditionally:
</p>
<strong>sample.html</strong>
<pre class="brush: html; highlight: [3]">
<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>
</pre>
<p>
The resulting HTML will be:
</p>
<pre class="brush: html">
<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>
</pre>
<p>
If we want to do this depending on a condition:
</p>
<strong>sample.html</strong>
<pre class="brush: html; highlight: [3]">
<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>
</pre>
<p>
The above example will omit the <em>div</em> tag if the variable <em>omitDiv</em> evaluates to <code>true</code>: rules to this are the same than <a href="conditionals.html">conditional's</a>
</p>
<h2 data-attributes="id 'replace'">Replacing</h2>
<p>
The <em>data-replace</em> attribute is similar to <em>data-content</em>, but the first one removes the surrounding start and end tags:
</p>
<strong>sample.html</strong>
<pre class="brush: html; highlight: [4]">
<html>
<body>
<p>
This is <span data-replace="title">the title</span>
</p>
</body>
</html>
</pre>
<p>
The resulting HTML will be:
</p>
<pre class="brush: html">
<html>
<body>
<p>
This is hello world!
</p>
</body>
</html>
</pre>
<h2 data-attributes="id 'drawbacks'">Drawbacks to omitting and replacing</h2>
<p>
These attributes are useful, but the impossibility of updating is an important drawback.
</p>
<p>
Let's see and example of a template:
</p>
<pre class="brush: html; highlight: [4]">
<html>
<body>
<p>
This is <span data-content="title">the title</span>
</p>
</body>
</html>
</pre>
<p>
The resulting HTML will be:
</p>
<pre class="brush: html; highlight: [4]">
<html>
<body>
<p>
This is <span data-content="title">hello world!</span>
</p>
</body>
</html>
</pre>
<p>
If we want to update the title:
</p>
<pre class="brush: js">
dictionary.message = "bye, world!";
</pre>
<p>
The updated resulting HTML will be:
</p>
<pre class="brush: html; highlight: [4]">
<html>
<body>
<p>
This is <span data-content="title">bye world!</span>
</p>
</body>
</html>
</pre>
<p>
Instead of using <code>data-content</code> let's use <code>data-replace</code>.
</p>
<pre class="brush: html; highlight: [4]">
<html>
<body>
<p>
This is <span data-replace="title">the title</span>
</p>
</body>
</html>
</pre>
<p>
The resulting HTML will be:
</p>
<pre class="brush: html; highlight: [4]">
<html>
<body>
<p>
This is hello world!
</p>
</body>
</html>
</pre>
<p>
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 <code>data-omit-tag</code>.
</p>
<p>
In short, use these tags when no updating is needed. If you need updating avoid them, use <code>data-content</code> and other custom attributes.
</p>
</article>
</div>
</body>
</html>