Hooks allow you to execute any custom logic before DOM update or just after it. For example, you can do a model transform by adding or removing some fields before DOM update, or add necessary CSS classes for certain elements and attach JS handlers to them just after the update.

function removeExtraInfo() {
   data.users.forEach(function(user) {
      delete user.extra
   })
}         

function setHandlers() {
   // Setting JS handlers for everything
}

as.setBefore('data', removeExtraInfo)
as.setAfter('data', setHandlers)
as.add('data')
               

There are two kinds of hooks in Autosync: model and global hooks. The first ones only trigger when the model on which they are registered changes, while the second ones trigger on any existing model change. To register a global hoook you need to pass an empty string as a model name.

Any hook receives two arguments: the new model value is passed in the first one, the second argument stores extra data about the current update (the context, the key, the logical path to event source inside the model and some other data).