zpt
Version:
Zenon Page Templates - JS (ZPT-JS)
86 lines (76 loc) • 2.77 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>ZPT-JS reference - Configuration - dictionaryChanges</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 - dictionaryChanges</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">
dictionaryChanges ::= a javascript object
</pre>
<h2 data-attributes="id 'description'">Description</h2>
<p>
The <code>dictionaryChanges</code> is used to declare one or more values in dictionary that must be updated. It is a javascript object. ZPT-JS will also update HTML!
</p>
<p>
Important! This configuration option must be used beside <a href="configuration-command.html">update</a> command. It the command is not <em>update</em> it will be ignored.
</p>
<h2 data-attributes="id 'examples'">Examples</h2>
<p>
An example of <em>fullRender</em>:
</p>
<pre class="brush: js; highlight: [29]">
"use strict";
var zpt = require( 'zpt' );
var dictionary = {
aString: "string",
doggy: false,
number: 23,
user: {
name: "Bob",
age: function( ){
return 25;
}
},
items: [ "item0", "item1", "item2" ]
};
// Parse template
zpt.run({
root: document.body,
dictionary: dictionary
});
[ your code here ]
// Second execution: update the DOM, the user and the number have changed
zpt.run({
command: "update",
dictionaryChanges: {
number: 30,
user: {
name: "Kermit",
age: function( ){
return 45;
}
}
}
});
</pre>
</article>
</div>
</body>
</html>