zpt

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>More about updating</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 - More about updating</h1> <ul> <li><a href="#intro">Intro</a>.</li> <li><a href="#creatingArrays">Adding array items</a>.</li> <li><a href="#updatingArrays">Updating array items</a>.</li> <li><a href="#deletingArrays">Deleting array items</a>.</li> <li><a href="#search">Using searches to define complex expressions</a>.</li> <li><a href="#updatingObjects">Updating object properties</a>.</li> <li><a href="#deletingObjects">Deleting object properties</a>.</li> <li><a href="#reactiveDictionaries">Using reactive dictionaries</a>.</li> </ul> </div> <article data-fill-slot="'article'"> <h2 data-attributes="id 'intro'">Intro</h2> We have already seen how to update a template using the update command. And we have also seen reactive dictionaries in action. But in some cases this is not enough. Take a look at this template: <pre class="brush: html"> <ol> <li data-repeat="item items"> an item name: an item description </li> </ol> </pre> The javascript code to invoke ZPT-JS: <pre class="brush: js"> import { zpt } from './zpt-esm.js'; var dictionary = new zpt.ReactiveDictionary({ items: [ { name: 'John', description: 'The number 1' }, { name: 'Peter', description: 'The number 2' }, { name: 'Luke', description: 'The number 3' } ]; }); // Parse template zpt.run({ root: document.body, dictionary: dictionary }); </pre> Now we want to update the list of items. We can set the items in the dictionary this way: <pre class="brush: js"> dictionary.items = [ { name: 'John', description: 'The number 1' }, { name: 'Peter', description: 'The number 2' }, { name: 'Luke', description: 'The number 3' }, { name: 'Mary', description: 'The number 4' } ]; ); </pre> That code makes ZPT-JS to update the data-repeat node. It removes the current content and rebuilds it all. Perhaps this is not important for you, but it can be. Anyway this way is not very natural, it would be great if ZPT-JS would provide a way to update the items array and then rebuilds only the needed HTML. <h2 data-attributes="id 'creatingArrays'">Adding array items</h2> Take a look at this: <pre class="brush: js"> zpt.run({ command: 'update', dictionaryActions: [ { id: 'items', action: 'createArray', index: '_last_', newElement: { name: 'Mary', description: 'The number 4' } } ] }); </pre> Using dictionaryActions makes it easy to update the dictionary and the template. Some remarks about this: <ul> <li> The id refers to the variable to modify. </li> <li> The action defines the action to run. Available options are createArray, updateArray, deleteArray, updateObject and deleteObject. </li> <li> The index indicates the place in the list to add the new element. Available options are '_first_', '_last_' and a numeric value. </li> <li> The newElement can be a String, number or object. If it is an array ZPT-JS will add each element of the array, making it easy to add several elements at once. </li> </ul> <h2 data-attributes="id 'updatingArrays'">Updating array items</h2> Now we are going to update the second item (replace Peter by Mia): <pre class="brush: js"> zpt.run({ command: 'update', dictionaryActions: [ { id: 'items', action: 'updateArray', index: 1, newElement: { name: 'Mia', description: 'The number 5' } } ] }); </pre> Another way would be: <pre class="brush: js; highlight: [7,8,9]"> zpt.run({ command: 'update', dictionaryActions: [ { id: 'items', action: 'updateArray', currentElement: { name: 'Peter' }, newElement: { name: 'Mia', description: 'The number 5' } } ] }); </pre> Using currentElement provides an alternative way of finding elements to update or delete. The element must match all the fields of the currentElement if it is an object; if it is a literal (numeric or string) it must be equal. <h2 data-attributes="id 'deletingArrays'">Deleting array items</h2> Now we are going to delete the first item (delete John): <pre class="brush: js"> zpt.run({ command: 'update', dictionaryActions: [ { id: 'items', action: 'deleteArray', index: '_first_' } ] }); </pre> We could use a 0 value as index. Another way would be: <pre class="brush: js; highlight: [7,8,9]"> zpt.run({ command: 'update', dictionaryActions: [ { id: 'items', action: 'deleteArray', currentElement: { name: 'John' } } ] }); </pre> <h2 data-attributes="id 'search'">Using searches to define complex expressions</h2> Take a look at this template: <pre class="brush: html"> <ol> <li data-repeat="object objectList"> <ol> <li data-repeat="item object/items"> an item name: an item description </li> </ol> </li> </ol> </pre> The javascript code to invoke ZPT-JS: <pre class="brush: js"> import { zpt } from './zpt-esm.js'; var dictionary = new zpt.ReactiveDictionary({ objectList: [ { id: 'object1', items: [ { name: 'John', description: 'The number 1' }, { name: 'Peter', description: 'The number 2' }, { name: 'Luke', description: 'The number 3' } ] }, { id: 'object2', items: [ { name: 'Michael', description: 'The number 4' }, { name: 'Chris', description: 'The number 5' }, { name: 'Lars', description: 'The number 6' } ] } ] }); // Parse template zpt.run({ root: document.body, dictionary: dictionary }); </pre> Now we want to add a new element to objectList: <pre class="brush: js"> zpt.run({ command: 'update', dictionaryActions: [ { id: 'objectList', action: 'createArray', index: '_last_', newElement: { id: 'object3', items: [ { name: 'Mary', description: 'The number 7' }, { name: 'Ann', description: 'The number 8' } ] } } ] }); </pre> The resulting HTML looks like this: <pre class="brush: html"> 1. object1 John: The number 1 Peter: The number 2 Luke: The number 3 2. object2 Michael: The number 4 Chris: The number 5 Lars: The number 6 3. object3 Mary: The number 7 Ann: The number 8 </pre> Now we are going to insert a new item inside object3 (Selena, the number 9) to get something like this: <pre class="brush: html highlight: [10]"> 1. object1 John: The number 1 Peter: The number 2 Luke: The number 3 2. object2 Michael: The number 4 Chris: The number 5 Lars: The number 6 3. object3 Selena: The number 9 Mary: The number 7 Ann: The number 8 </pre> And the command to run: <pre class="brush: js; highlight: [5,6,7,8,9,10,11,11]"> zpt.run({ command: 'update', dictionaryActions: [ { search: [ 'objectList', { id: 'object3' }, 'items' ], action: 'createArray', index: '_first_', newElement: { name: 'Selena', description: 'The number 9' } } ] }); </pre> A search element is an array of elements that ZPT-JS combines to define a path to access the variable you want to modify. Each element can be one of these types: <ul> <li>A literal string. Such as objectList or items in this example.</li> <li>A literal integer. Useful to select item from arrays.</li> <li>An object. ZPT-JS will search into the available items the first that matches it.</li> </ul> In this example the path defined by the search is objectList[ id='object3' ].items. The same search using an integer as a search item: <pre class="brush: js; highlight: [7]"> zpt.run({ command: 'update', dictionaryActions: [ { search: [ 'objectList', 2, 'items' ], action: 'createArray', index: '_first_', newElement: { name: 'Selena', description: 'The number 9' } } ] }); </pre> In this example the path defined by the search is objectList[1].items. The same search using _last_ as a search item: <pre class="brush: js; highlight: [7]"> zpt.run({ command: 'update', dictionaryActions: [ { search: [ 'objectList', '_last_', 'items' ], action: 'createArray', index: '_first_', newElement: { name: 'Selena', description: 'The number 9' } } ] }); </pre> Search elements can be used in any class of dictionaryActions, not only in createArray actions. <h2 data-attributes="id 'updatingObjects'">Updating object properties</h2> Take a look at this template: <pre class="brush: html"> <div> an item name: an item description </div> </pre> Now we are going to update the name property (now the name is Dave): <pre class="brush: js"> zpt.run({ command: 'update', dictionaryActions: [ { search: [ 'object' ], action: 'updateObject', property: 'name', newElement: 'Dave' } ] }); </pre> <h2 data-attributes="id 'deletingObjects'">Deleting object properties</h2> Using the previous template, now we are going to delete the name property: <pre class="brush: js"> zpt.run({ command: 'update', dictionaryActions: [ { search: [ 'object' ], action: 'deleteObject', property: 'name' } ] }); </pre> The name property has been deleted from the object vaiable in the dictionary. <h2 data-attributes="id 'reactiveDictionaries'">Using reactive dictionaries</h2> An alternative way of working with dictionary actions is using a reactive dictionary: <pre class="brush: js"> import { zpt } from './zpt-esm.js'; var dictionary = new zpt.ReactiveDictionary({ items: [ { id: 'object1', items: [ { name: 'John', description: 'The number 1' }, { name: 'Peter', description: 'The number 2' }, { name: 'Luke', description: 'The number 3' } ] } ]; }); // Parse template zpt.run({ root: document.body, dictionary: dictionary }); </pre> To run a dictionary action, you can do this: <pre class="brush: js"> dictionary._addActions([ { id: 'items', action: 'createArray', index: '_last_', newElement: { id: 'object2', items: [ { name: 'Sophia', description: 'The number 4' }, { name: 'Jane', description: 'The number 5' }, { name: 'Drew', description: 'The number 6' } ] } } ]); </pre> Be careful, the update is done inmediately. For more details about reactive dictionaries, see <a href="../reference/reactiveDictionaries.html">reference page</a> </article> </div> </body> </html>