zpt
Version:
Zenon Page Templates - JS (ZPT-JS)
147 lines (132 loc) • 5.07 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>ZPT-JS reference - Configuration - notRemoveGeneratedTags</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 reference - Configuration - notRemoveGeneratedTags</h1>
<ul>
<li><a href="#syntax">Syntax</a>.</li>
<li><a href="#description">Description</a>.</li>
<li><a href="#examples">Examples</a>.</li>
</ul>
</div>
<article data-fill-slot="'article'">
<h2 data-attributes="id 'syntax'">Syntax</h2>
<pre class="syntax">
notRemoveGeneratedTags ::= a boolean value
</pre>
<h2 data-attributes="id 'description'">Description</h2>
<p>
The <code>notRemoveGeneratedTags</code> sets whether ZPT-JS will remove the previously generated tags before processing. It must be a boolean value. The default value is <code>false</code> (to remove them).
</p>
<p>
ZPT-JS generates new HTML tags if the template uses:
</p>
<ul>
<li><a href="attributes-TALRepeat.html">data-repeat</a>. Loops: ZPT-JS copies the node to repeat several times.</li>
<li><a href="attributes-METALUseMacro.html">data-use-macro</a>. Macros: ZPT-JS copies the node of the macro once.</li>
</ul>
<h2 data-attributes="id 'examples'">Examples</h2>
<p>
We are goint to invoke ZPT-JS twice, setting <code>notRemoveGeneratedTags</code> to <code>true</code> the second time:
</p>
<pre class="brush: js; highlight: [21]">
"use strict";
var zpt = require( 'zpt' );
var dictionary = {
someNumbers: [ 10, 20, 30 ]
};
// First execution: add 10/20/30
zpt.run({
root: document.body,
dictionary: dictionary
});
[ your code here ]
// Second execution: add 40/50
dictionary.someNumbers = [ 40, 50 ];
zpt.run({
notRemoveGeneratedTags: true
});
</pre>
<p>
The template:
</p>
<pre class="brush: html">
<body>
<ol>
<li data-repeat="c someNumbers">
Iterating element <span data-content="c">a number</span>
</li>
</ol>
</body>
</pre>
<p>
After the first invokation the visible HTML document would be:
</p>
<pre class="brush: html">
<body>
<ol>
<li>
Iterating element <span data-content="c">10</span>
</li>
<li>
Iterating element <span data-content="c">20</span>
</li>
<li>
Iterating element <span data-content="c">30</span>
</li>
</ol>
</body>
</pre>
<p>
After the second invokation:
</p>
<pre class="brush: html">
<body>
<ol>
<li>
Iterating element <span data-content="c">10</span>
</li>
<li>
Iterating element <span data-content="c">20</span>
</li>
<li>
Iterating element <span data-content="c">30</span>
</li>
<li>
Iterating element <span data-content="c">40</span>
</li>
<li>
Iterating element <span data-content="c">50</span>
</li>
</ol>
</body>
</pre>
<p>
If we don't set the <code>notRemoveGeneratedTags</code> value in the second invokation (as usually), the result is:
</p>
<pre class="brush: html">
<body>
<ol>
<li>
Iterating element <span data-content="c">40</span>
</li>
<li>
Iterating element <span data-content="c">50</span>
</li>
</ol>
</body>
</pre>
</article>
</div>
</body>
</html>