Documentation
Primary version
Primary version
  • Cubbles documentation
  • First steps
    • Generate a project
    • Create a webpackage
    • Create an elementary component
    • Create a compound component
      • Compound slot initialization
  • Runtime extension - RTE
    • User guide
      • RTE Integration
      • The Cubbles TAG API
        • The Cubbles Dependency API
      • The Cubbles Javascript API
        • Interacting with Cubbles from the outside
        • Adding dynamic connections
        • Interacting with Elementary Cubbles from the inside
      • The RTE Processing
        • RTE initialization and rendering timeline
      • The Cubbles IFrame API
        • The Cubbles IFrame Resizer API
      • The Cubbles mutation based start event API
      • FAQs
        • How to manually resolve dependency conflicts?
        • How to create a component instance dynamically?
        • How to render HTML Markup coming from input slot?
        • How to replace a dependency when declaring a component instance?
        • How to synchronize multiple dataflows between component instances?
        • How to handle the copyValue flag for non serializable instances?
    • Contributor guide
      • CIF processing
  • Developing with the vanilla boilerplate
    • Creating a new project
    • Developing elementaries using the vanilla boilerplate
    • Developing compounds using the vanilla boilerplate
    • Using the vanilla boilerplate scripts
  • Coder devtools - CDT
    • User guide
      • Create Cubbles artifacts
      • Upload a Webpackage
      • Generate a README file
      • Rename an artifact
      • Configure network proxy
      • Validate the manifest.webpackage file
      • Change active webpackage
      • Bulk upload of webpackages
      • Release a webpackage
      • Update the RTE version of a webpackage
      • Prepare a webpackage to be released
      • Update webpackage to the next development version
      • Generate a test environment for a component
      • Testing Cubbles components
      • Validate sources
      • Create a demo webpackage
    • Contributor guide
      • Checklist for releasing a new webpackage.modelVersion
  • Terms and concepts
    • Webpackage
    • Artifacts
    • User roles
    • Base
Powered by GitBook
On this page
  1. Runtime extension - RTE
  2. User guide
  3. FAQs

How to synchronize multiple dataflows between component instances?

PreviousHow to replace a dependency when declaring a component instance?NextHow to handle the copyValue flag for non serializable instances?

Last updated 6 years ago

Sometimes you will need to synchronize the dataflow of a compound component. Let's say you have a component similar to the data-compound presented below:

Let's say that you need both data1 and data2 slots from the dataProcessor member to be ready for the processedData slot to be set. As you can notice, it is not possible to know which slot will be the first one to be ready. So, we need a way to be sure that both slots are set, no matter the order in which they are loaded. One way you can control this is by:

  1. having a handler method which will perform the desired behavior only when everything needed is ready

  2. calling this method every time the value of a slot, that need to be synchronized, changes; i.e. using the model\[SlotId\]Changed () (See )

In our case, we will handle this in the data-processor component logic. The code would look similar to:

...

/* 1. having a handler method which will perform the desired behavior only when everything needed is ready */
_processData: function() {
    if (this.getData1() and this.getData2()) {
        // Process data
        var processedData = ...


        //Set processedData slot
        this.setProcessedData(processedData);
    }
},


/* 2. calling this method every time the value of a slot, that need to be synchronized, changes; i.e. using the model\[SlotId\]Changed () */
modelData1Changed: function(newData) {
    this._processData();
},

modelData2Changed: function(newData) {
    this._processData();
},
...

Some considerations

  • Note that the data-processor component is an elementary, and it should be like that since we need to be able to access component logic. Remember, that compounds have no associated logic. In case you don't have a component similar to data-processor, you could create an elementary to handle the synchronization and add it to your original model.

  • If you need additional validation, i.e. not only having the slots set, then you may create validation methods and call them in the condition of the handler method.

  • You may also consider resetting slots when you want to avoid the handler method to process slots when only one or some of them have changed, i.e. when you want to perform something only when all the slots change

The Cubbles Javascript API
Sample compound component whose dataflow should be synchronized