Autosync
work with data, not with DOM
Download
autosync.jsStandard version: IE 9+, Firefox 4.0+, Opera 12.1+, Chrome 5.0+
autosync-compat.jsExtended version: IE 6+, Firefox 1.0+, Opera 8.0+
Two-way binding

Autosync does not perform automatic 2-way binding intentionally in order to give you maximum freedom to choose when to make a backward synchronization. For this operation the pull method is provided. Its first two arguments are the model and the context, just like in the add method. The third update argument tells Autosync whether it needs to update all HTML elements with an appropriate combination of model, scope, key attributes. The key is passed as the fifth argument. The fourth argument url allow to send the new value of model to the server in background using POST (field data). Object and array serialization before sending is performed automatically.


as.pull('profile_data', data, false, '/api/user.php?update')
               
Atomic update mode

Let's assume you output the full JSON representation of your model into some object for debugging purposes. In such a case you need that after any data update in child objects your element would update itself. However, parent models do not trigger an update of their elements on child models' changes by default. To change this behavior you need to pass atomic parameter into the add method:


as.add('user.profile_data', data, 'profile', true)
               

This allows to update elements with asmodel="user.profile_data" and asmodelkey="profile" when any nested value inside user.profile_data changes, and not only on the explicit object reassign.

JSON parsing

Sometimes you might need to get the object into the model from its string JSON representation in an input field (e.g. for debugging purposes). In this case you should set asjson attribute on the corresponding element:


<textarea asmodel="user.profile_data" key="profile" asjson></textarea>
               

If elements with this attribute set and the appropriate asmodel attribute value are present in the document, the atomic value for the model will be automatically set to true on initialization, so you don't have to pass it explicitly in this situation.