Data Binding Demystified

Data Bindings are a useful feature in Anvil that make it easy to keep your UI components in sync with your data. A Data Binding associates a property of a component with a single Python expression, saving you from repeating similar sorts of assignments all over your code. In this tutorial we’re going to look at what Data Bindings are, how you can use them, and common gotchas.

The final app will look something like this:

We’re going to look at data bindings by developing an example app for logging our favorite movies. Our tutorial will have three main parts:

1. We’ll build an app and use data bindings to display movie data
2. Next, we’ll extend the functionality to edit the data
3. Then, we’ll store the data to a Data Table
4. Finally, we’ll make some changes so that edits to our data persist when the app is re-run

What is a Data Binding?

When you want to display the contents of a variable in a visual component you would normally use code like this:

self.label_1.text = self.title

If you wanted to update the Label component when self.title changed, you would need to repeat that line of code in each place the variable changed. A data binding allows you to establish the relationship between the visual component and the variable once, eliminating all the assignment statements from your code.

Chapters

You can download the source code for the finished app here: