Enterprise Rich Internet Applications (RIAs) often focus more on rich data vs. the rich media aspects of RIAs more typical of consumer applications. For example, such RIAs depend on implementing the well-known CRUD operations on data stored in back-end systems. The dojox/mvc package focuses on View to Model data binding (eg. View Controller) concerns on the client, easing development of data-rich UI, which Create, Read, Update, and Delete data. dojox.mvc deals with data binding/controller concerns within a View, but does not deal with application level concerns that span multiple Views (such as navigation), see dojox/app for Application-level Controller concerns.

It enables widgets (desktop and mobile) to “bind” to data within the model. A bind creates a bi-directional or a single directional update mechanism between the bound view and the underlying data.

The data model is “live” data i.e. it maintains any updates driven by the view on the underlying data.

The data model issues updates to portions of the view if the data they bind to is updated in the model. For example, if two widgets are bound to the same part of a data model, updating the value of one in the view will cause the data model to issue an update to the other widget with the new value.

When the model is backed by a dojo.store or dojo.data query, the client-side updates can be persisted once the client is ready to “submit” the changes (which may include both value changes or structural changes - adds/deletes). The datamodel allows control over when the underlying data is persisted i.e. this can be more incremental or batched per application needs.

dojox/mvc/at typically is used in data-dojo-props for declarative data binding, where a widget can synchronize its attribute with another dojo/Stateful. It can also be used in the first parameter of widget constructor (list of initial property values) for programmatic data binding.

dojox/mvc/ListController is an inheritance of dojox/mvc/ModelRefController, working with an array as the model, and maintains its current position so that widgets referring to this controller can update their UI just by changing the position in this controller.

Basic example, input-output sync: Anything typed into the input fields will be updated in the model and reflected in the output field when you leave the input field.

varmodel;require(["dojo/parser","dojo/Stateful","dojo/domReady!"],function(parser,Stateful){// For this test we can use a simple dojo/Stateful as our modelmodel=newStateful({First:"John",Last:"Doe",Email:"jdoe@example.com"});parser.parse();});

Basic example two, input-output sync: Anything typed into the input fields will be updated in the model and reflected in the output field when you leave the input field. The “Reset” button will reset the model back to it’s original values. The other buttons show how to programmatically set things in the model to have the update reflected in the widget, and how to programmatically update the widget and have it update the model.