Flow.js: Variables and Attributes

Displaying and Updating Model Variables

You can bind variables from your project's model to your project's user interface by setting the data-f-bind attribute of any HTML element. (Flow.js uses the HTML5 convention of prepending data- to any custom HTML attribute. Flow.js also adds f for easy identification of Flow.js and Forio.)

The data-f-bind attribute binding is bi-directional, meaning that as the model changes, the interface is automatically updated; and when end users change values in the interface, the model is automatically updated. Specifically:

• The binding from the model to the interface ensures that the current value of the variable is displayed in the HTML element. This includes automatic updates to the displayed value if something else changes in the model.

• The binding from the interface to the model ensures that if the HTML element is editable, changes are sent to the model.

Once you set data-f-bind, Flow.js figures out the appropriate action to take based on the element type and the data response from your model.

How do I ... ?

Action	Attribute	More Information
Display and automatically update a variable in the interface?	data-f-bind	See Default Bi-directional Binding.
Display and automatically update array and object variables?	data-f-foreach, and optionally, templates	See Display Array and Object Variables.
Display the value of the variable at every time step (not just the current one)?	data-f-repeat	See Display Array Variables.
Display a DOM element based on whether a variable is true or false?	data-f-showif, data-f-hideif	See Display Elements Conditionally (showif) and Display Elements Conditionally (hideif).
Display different information based on the value of a variable?	any comparison attribute	See Boolean Conditional Converters and Number Comparison Converters.
Call a model operation each time a variable changes?	data-f-bind with Flow.channel.variables.subscribe	Bind the variable, use the Variables Channel to subscribe to the variable, and then call the operation in the callback function for the subscription. See details in the How To example.
Select an option from an HTML element based on a model variable?	data-f-bind with input or select	This happens automatically when you use data-f-bind with input and select elements. See more on binding to select elements and binding with checkboxes and radio buttons.
Work with an HTML attribute that accepts Boolean values?	Special handling is provided for a few common attributes, including data-f-checked, data-f-selected, data-f-disabled, and data-f-hidden.	See Binding to Boolean attributes.
Change the styling of HTML elements based on the value of a model variable?	data-f-class	See Binding with Style.
Set other HTML attributes to the value of a model variable?	data-f-value, data-f-<attribute>	See default attribute handling.
Create my own custom attribute?	data-f-<customAttribute>	Use the Attribute Manager to add your own attributes.