Constructos State Management

WinnetouJs uses the concept of Virtual DOM to manipulate the application state. There are several native ways to deal with HTML document nodes, like getElementById for example, and in Winnetou you can change the constructos in this way without any problem. However, we also have our own way of manipulating Winnetou web components (constructos) which are mutables.

What are mutables

Mutables are variables that can be kept in the client's memory and that can be retrieved when returning to the app. Furthermore, by changing the value of a mutable, we can change a constructo, making it update its text, color, size, etc.

Starting a mutable

To start a mutable, use the Winnetou Core initMutable command.

        
import {Winnetou} from 'winnetoujs';
...
let name = Winnetou.initMutable('John');
       
      

Using mutables in constructos

To use a mutable in a constructo, use {mutable:variable_name} as the value of a prop.

        
import {Winnetou} from 'winnetoujs';
import {profileCard} from './constructos/cards.js';
...
let userName = Winnetou.initMutable('Mary');
let userAge = Winnetou.initMutable('23');

profileCard({
    name: {mutable: userName},
    age: {mutable: userAge}
}).create('#app');
       
      

Changing the application state

To update the DOM, use the setMutable method.

          
import {Winnetou} from 'winnetoujs';
import {profileCard} from './constructos/cards.js';
...
let userName = Winnetou.initMutable('Mary');
let userAge = Winnetou.initMutable('23');

profileCard({
    name: {mutable: userName},
    age: {mutable: userAge}
}).create('#app');

Winnetou.setMutable(userName,'John');
// now profileCard will show 'John' in name prop
        
        

Not Persistent

We don't always need the variable's value to be stored on the client, so we can use the notPersistent configuration of mutables.

            
import {Winnetou} from 'winnetoujs';
...
Winnetou.setMutable('mutable_name','mutable_value','notPersistent');
           
          

Attention: initMutable is always notPersistent.

Reading mutables

Use getMutable('mutable_name') in order to read the value of a mutable.

              
import {Winnetou} from 'winnetoujs';
...
let val = Winnetou.getMutable(userName)