ZPT-JS tutorial - Using a reactive dictionary

Build the dictionary

You can use any javascript object, but ZPT provides an specific type that supports a reactive behaviour: 

import { zpt } from './zpt-esm.js';

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

Invoke ZPT-JS

Invoke the run method of ZPT: 

import { zpt } from './zpt-esm.js';

...

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

The resulting Javascript file (gettingStarted.js) is: 

import { zpt } from './zpt-esm.js';

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

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

That's all!

The result

The resulting body element is: 

<body>
    <p data-content="message">
        Hello, world!
    </p>
</body>

Updates

If we change some data in the dictionary this way: 

dictionary.message = "Bye, world!";

We don't need to do anything else, the body element now is: 

<body>
    <p data-content="message">
        Bye, world!
    </p>
</body>