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.)
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 ... ?
|Display and automatically update a variable in the interface?||
||See Default Bi-directional Binding.|
|Display and automatically update array and object variables?||
||See Display Array and Object Variables.|
|Display the value of the variable at every time step (not just the current one)?||
||See Display Array Variables.|
|Display a DOM element based on whether a variable is true or false?||
||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?||
||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?||
||This happens automatically when you use
|Work with an HTML attribute that accepts Boolean values?||Special handling is provided for a few common attributes, including
||See Binding to Boolean attributes.|
|Change the styling of HTML elements based on the value of a model variable?||
||See Binding with Style.|
|Set other HTML attributes to the value of a model variable?||
||See default attribute handling.|
|Create my own custom attribute?||
||Use the Attribute Manager to add your own attributes.|