Skip to end of metadata
Go to start of metadata

Demonstrates how to manually trigger a UI update between the data model and a view.

App Folder Location

alloy/test/apps/models/binding_dataFunction

By default, a view is automatically updated whenever it's associated data collection changes. The dataFunction attribute of an Alloy element lets you provide an explicit name to the function that's auto-generated by the Allow compiler that, when called, performs this update. This lets you manually call this function when appropriate for your application.

The main XML view defines the <TableView/> element and assigns the value "updateUI" to the dataFunction attribute. It also provides some Labels (which act as buttons) to call the doChanges() and updateUI() functions defined in the view-controller.

app/views/index.xml

Clicking Change in the sample app calls the doChanges() function, which modifies the data model used by the TableView. The model.set() method's second parameter is passed silent: true, which prevents the data binding from firing automatically. Clicking the Update button invokes the updateUI() function, which then causes the UI to update. 

app/controllers/index.js

The sample's  data collection is created by the alloy.js file.

app/alloy.js

See also