ZPT-JS reference - Reactive dictionaries

Syntax

var name = new zpt.ReactiveDictionary( object, [ autoCommit ] );

dictionaryActions = updateArray || deleteArray || createArray || updateObject || deleteObject
updateArray = {
    id: identifier,
    search: searchObject,
    action: 'updateArray',
    index: number,
    currentElement: number || String || object
    newElement: number || String || object
}
deleteArray = {
    id: identifier,
    search: searchObject,
    action: 'deleteArray',
    index: number,
    currentElement: number || String || object
}
createArray = {
    id: identifier,
    search: searchObject,
    action: 'createArray',
    index: number,
    newElement: number || String || object
}
updateObject = {
    id: identifier,
    search: searchObject,
    action: 'updateObject',
    property: identifier,
    newElement: number || String || object
}
deleteObject = {
    id: identifier,
    search: searchObject,
    action: 'deleteObject',
    property: identifier
}
searchObject = [ searchObjectItem+ ]
searchObjectItem = number || String || object
                

Description

Defines a dictionary with reactive capabilities: it can detect some type of modifications done to it and invoke an update command. The parameters are:

When a ReactiveDictionary is instanced ZPT-JS walks through all of the properties of the object and creates getters and setters using Object.defineProperty inside the ReactiveDictionary: the original object is not modified.

The avaliable methods are:

Examples

An example of use:

"use strict";

var zpt = require( 'zpt' );

var dictionary = new zpt.ReactiveDictionary({
    message: 'Hello, world!'
});

// Parse template
zpt.run({
    root: document.body,
    dictionary: dictionary
});
                

If we change some data in the dictionary this way:

dictionary.message = "Bye, world!";
                

We don't need to do anything else, the HTML code will be updated.

More examples. If we want to do some changes but only one update of HTML we must set the auto commit to off:

"use strict";

var zpt = require( 'zpt' );

var dictionary = new zpt.ReactiveDictionary(
    {
        message1: 'Hello, world1!',
        message2: 'Hello, world2!',
        message3: 'Hello, world3!'
    }, 
    false
);

// Parse template
zpt.run({
    root: document.body,
    dictionary: dictionary
});
                

Now we modify some variables, but ZPT will not update HTML until commit is done:

dictionary.message1 = 'Bye, world1!';
dictionary.message2 = 'Bye, world2!';
dictionary.message3 = 'Bye, world3!';

dictionary._commit();
                

We can activate or deactivate auto commit mode whenever we want:

dictionary._setAutoCommit( true );

dictionary.message1 = 'Hello again, world!';
                

ZPT will update HTML after the change of the value of message1. Be careful, pending updates will also be done!