Modify using reactive data

The default fill configuration is to make the data reactive. This means that after the initial fill, the UI will be updated automatically on changes to the data. For example, with the following HTML and Javascript:

HTML

    <div id="myMessage" {}="message"></div>

Javascript

    var message = { message: 'Hello' };
    Modstache.fill(document.getElementById('myMessage'), message);

This will result in the following HTML:

    <div id="myMessage" {}="message">Hello</div>

After the message is changed:

    message.message = 'Hi';

The HTML will change to:

    <div id="myMessage" {}="message">Hi</div>

The values in the data can be modified in the following ways to preserve the reactive nature of the data:

    message.message = newvalue;
    Object.assign(message, { message: newvalue });

The following methods can be used to clear the reactive nature of the data:

    message = Object.assign({}, message);
    message = {...message};

The UI can be filled again with the new object to make it reactive.

Selectively enabling or disabling reactive data

The reactive option setting can be superceded in several ways to selectively enable or disable reactive assignments. This is useful because reactivity remains active for the life of the data object. This can result in deleted DOM elements persisting in memory if they have been assigned to reactive data. Note that The reactive assignments for elements created using reactive arrays are managed by Modstache, but not for elements removed externally.

To enable a reactive assignment, include a "+" after the data property name in the stache attribute assignment.

For example:

        <input type="text" {}="value:message+" value="" />
    

To disable a reactive assignment, include a "-" after ther data property name in the stache attribute assignment. For example:

        <input type="text" {}="value:message-" value="" />