How To: Update a UI Element Each Time a Model Operation is Called

This example steps through how to use Flow.js to have an element on a page updated after every time a particular model operation is called.

What You Need

A UI element with an id
A model operation
A user interface for your project that uses Flow.js
- You can create this interface using the Interface Builder
- Or, you can create this interface by hand, using Flow.js directly
- Either way, make sure you're including Flow.js and its dependencies in your HTML file

Solution Outline

Bind your model operation to a UI element.
Use the Flow.js operations channel to subscribe to calls for this operation.
In the callback function for the subscription, update the UI element.
View the complete example.

Solution Implementation

Bind your model operation to a UI element.

You can bind operations from your project's model to your project's user interface by setting the data-f-on-event attribute of any HTML element. For example:
```
 <input type="button" value="Run the Analysis" data-f-on-click="analyze"/>
```
More information: Flow.js Operations and Events; data-f-event.
Use the Flow.js operations channel to subscribe to calls for this operation.

Flow.js provides a channel between the variables and operations in your model and the HTML elements in your interface.

In general, you simply reference model operations directly within HTML elements; Flow.js takes care of all of the details.

However, you also can work directly with the channels yourself, which is what we want to do in this case: we want to listen for any changes being made to a particular model operation. This is called subscribing.

You can do it in the JavaScript on your HTML page:
```
 <script>

     Flow.initialize();
     Flow.channel.operations.subscribe('analyze');

 </script>
```
More information: Flow.js Operations Channel.
In the callback function for the subscription, update the UI element.

The operations channel subscribe() function also takes a callback function as a parameter. This callback function is called each time the operation being subscribed to is called.

To update a UI element each time a model operation is called, display or update the UI element as part of the callback:
```
 <script>

     Flow.initialize();
     Flow.channel.operations.subscribe('analyze', function() { $('#results').show(); });

 </script>
```
More information: Flow.js Operations Channel.

View the complete example. Here's the complete code:

 <html>
 <head>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
     <script src="//forio.com/tools/js-libs/2.9.1/epicenter.min.js"></script>
     <script src="//forio.com/tools/js-libs/flow/0.11.0/flow.js"></script>
 </head>

 <body data-f-model="myModel.py">

     <input type="button" value="Run the Analysis" data-f-on-click="analyze"/>
     <div id="results" style="display:none">Here's the results table</div>

     <script>

     Flow.initialize();
     Flow.channel.operations.subscribe('analyze', function() { $('#results').show(); });

     </script>

 </body>
 </html>

Variations and Related Examples. There are a couple of variations on this that may also be useful, depending on how your interface and model are structured:

You can subscribe to multiple operations at once. Use an array with the operation names: Flow.channel.operations.subscribe(['analyze', 'advance']).
If you want to call a model operation when a model variable changes, you can use a similar pattern to subscribe to the Flow.js variables channel instead of the operations channel. See How To: Call a Model Operation Each Time a Model Variable Changes.
If you want to update a graph or chart when your model variable changes, see Flow.js and Graphing. You could adapt this example to update the graph when a model operation is called, as well.
For information on handling other common uses cases involving binding UI elements to model variables or model operations, see the Flow.js working with variables and working with operations pages.