zpt
Version:
Zenon Page Templates - JS (ZPT-JS)
167 lines (147 loc) • 4.87 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Replacing content and attributes</title>
<script type="module" src="../js/zpt.js"></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 - Replacing content and attributes</h1>
<ul>
<li><a href="#content">Replacing content</a>.</li>
<li><a href="#attributes">Replacing attributes</a>.</li>
</ul>
</div>
<article data-fill-slot="'article'">
<h2 data-attributes="id 'content'">Replacing content</h2>
<p>
Let's see how we can replace the content of any tag by a value. Take a look at this template:
</p>
<strong>sample.html</strong>
<pre class="brush: html">
<html>
<body>
<p>
This is <span data-content="title">the title</span>.
</p>
</body>
</html>
</pre>
<p>
Now we declare the dictionary and invoke ZPT:
</p>
<strong>sample.js</strong>
<pre class="brush: js">
import { zpt } from './zpt-esm.js';
var dictionary = {
title: "hello world!"
};
zpt.run({
root: document.body,
dictionary: dictionary
});
</pre>
<p>
The resulting HTML will be:
</p>
<pre class="brush: html">
<html>
<body>
<p>
This is <span data-content="title">hello world!</span>
</p>
</body>
</html>
</pre>
<p>
ZPT-JS has replaced the content of the <em>span</em> element by the value of the <em>title</em> in the dictionary (the value of <em>dictionary.title</em>).
</p>
<h2 data-attributes="id 'attributes'">Replacing attributes</h2>
<p>
Now let's see how to replace the value of the attributes. Take a look at this template:
</p>
<strong>sample.html</strong>
<pre class="brush: html">
<html>
<body>
<p>
This is <a data-attributes="href url">a link</a>
</p>
</body>
</html>
</pre>
<p>
Now we declare the dictionary and invoke ZPT:
</p>
<strong>sample.js</strong>
<pre class="brush: js">
import { zpt } from './zpt-esm.js';
var dictionary = {
url: "https://www.gnu.org/"
};
zpt.run({
root: document.body,
dictionary: dictionary
});
</pre>
<p>
The resulting HTML will be:
</p>
<pre class="brush: html">
<html>
<body>
<p>
This is <a href="https://www.gnu.org/" data-attributes="href url">a link</a>.
</p>
</body>
</html>
</pre>
<p>
<em>data-attributes</em> supports more than one attribute (separated by <em>;</em>):
</p>
<strong>sample.html</strong>
<pre class="brush: html">
<html>
<body>
<p>
This is <a data-attributes="href url; title theTitle">a link</a>.
</p>
</body>
</html>
</pre>
<p>
Now we declare the dictionary and invoke ZPT:
</p>
<strong>sample.js</strong>
<pre class="brush: js">
import { zpt } from './zpt-esm.js';
var dictionary = {
url: "https://www.gnu.org/",
theTitle: "GNU"
};
zpt.run({
root: document.body,
dictionary: dictionary
});
</pre>
<p>
The resulting HTML will be:
</p>
<pre class="brush: html">
<html>
<body>
<p>
This is <a href="https://www.gnu.org/" title="GNU" data-attributes="href url; title theTitle">a link</a>.
</p>
</body>
</html>
</pre>
</article>
</div>
</body>
</html>