Skip to content

Data Binding

Overview

Data binding is how component properties stay in sync with your application's state. Instead of writing code to manually push values into the UI, you configure a binding on a component property and Bellini evaluates it automatically — whenever the underlying data changes, the component updates.

A binding is an expression: a small JavaScript snippet that is evaluated in the context of the current page or component, with access to all declarations and injected API services via $ctrl. The expression can reference a single declaration, call an API service function, or compute a value from multiple sources.

Bindings are configured in the Properties view. Every property has an expression icon that opens the Expression Editor where you write the binding expression. Properties that also accept a direct value additionally show an edit icon (paper and pen) — clicking it opens a text input, dropdown, or configuration dialog depending on the property type.

What You Will Learn

  • The core concepts behind how bindings work in Bellini
  • How binding direction (one-way vs two-way) is determined
  • How to write expressions to compute and transform values
  • How to iterate a component over an array of data

When To Use This

Use this when you need an introduction to data binding in Bellini — before writing your first expressions or configuring the Iterate property for the first time.

Binding Concepts

Data binding in Bellini is expression-based. Every bound property holds an expression evaluated against the page or component's declarations and services. Understanding how expressions are scoped, when they update, and how binding direction works is the foundation for everything else.

For more, see Binding Concepts.

Expressions

Expressions are the JavaScript snippets used in bindings. They have access to $ctrl (the page or component's declarations) and all injected services. They can call functions, navigate object properties, perform calculations, and return any value a component property expects.

For more, see Expressions.

Iterating Over Data

Any component or HTML element can be repeated over an array using the Iterate property in the Properties view. You specify the array expression and a variable name for the current item, which becomes available in the properties of the iterated element and its children.

For more, see Iterating Over Data.

Helpful Resources

  • Binding Concepts — How expressions are evaluated, when they update, and binding direction
  • Expressions — Write expressions to bind properties to declarations and services
  • Iterating Over Data — Repeat components over arrays using the Iterate property
  • Declarations — Create and manage page and component declarations
  • Community Q&A: Bellini Community
    Have a question? Post or search it here.