Attach data to a component
Data binding is fundamental to data-driven development on the Mobi low-code development platform. It connects visual components on a page to frontend data. This data can come from various sources, such as integration operations, frontend variables, or other components. When the data source changes, the component automatically updates its content. This process improves development efficiency and keeps the user interface synchronized with the data in real time.
Features
Data-driven views
A data-driven mechanism updates views, keeping the user interface synchronized with the data source. This improves application responsiveness and user experience.
Multiple data sources
Components can be attached to various data sources, such as integration operations, frontend variables, and data from other components.
Expression binding
Data binding supports JavaScript (JS) expression syntax, which provides a flexible way to handle data display logic.
Real-time preview
You can preview data binding effects in real time as you build your page. This ensures that data is displayed correctly.
Procedure
Select a component
In the page canvas, select a component or drag it to the desired position.
Click the component to open its properties panel.
Attach the data
In the properties panel, find the property that you want to attach data to, such as button text, text content, or list items.
In the code panel, write a JS expression. For configuration details, see the following steps.
Configure the expression
Enter an expression in the text content field, such as
{{integrationAction.data}}, to attach the data returned from an integration operation namedintegrationAction.Enter an expression in the text content field, such as
{{frontendFunc.data}}, to attach the data returned from a frontend function namedfrontendFunc.To attach a frontend variable or a computed property, use the format
{{variableName.value}}.To attach data from another component, use the format
{{componentId.propertyName}}. In this format,componentIdis the unique ID of the target component, andpropertyNameis the property name.
For more information about expressions and APIs, see Expressions and API Reference.
FAQ
Q: What if a component's content does not update after I attach data?
A: Check that the data binding expression is correct. Confirm that the data has a valid data dependency. Make sure that the data update triggers a component refresh.
Q: What types of data can I attach?
A: You can attach any accessible frontend data. This includes variables, results from integration operations, frontend functions, computed properties, and properties of other components.