This page is part of the External (Extended) Documentation

Pipes and reactive references

The class Core.Pipe implements the so-called pipes, which are the basic building block of the data flow paradigm in the Quokka platform. Pipes are used, in particular, in the QS language implementation of reactive references.

About reactive references in QS

When you've got properties that depend somehow on each other, reactive references allow you to declare dependencies between these properties instead of maintaining messy code which recalculates or copies property values each time that the master data is supposed to change. The QS implementation of reactive references is described in a brief material for QS developers, which can also serve you as a high-level introduction to the current topic.

Logical model of pipes

A single pipe corresponds to a single property dependency declaration. A pipe contains a collection of references to "master" properties and a callback function, which yields the resulting value of the pipe. This resulting value will be substituted as the new value of the dependent property as soon as any of the master properties is changed.

To create a pipe, you should "manually" define all the references, define the callback function, and then put it altogether in a new pipe object. The pipe will work automatically.

Syntax

The abstract syntax of a pipe is as follows

new Pipe(ref1, ref2, ..., refN, callback)

where each refX should be an instance of Core.Reference. The references are created by the ref method of intended objects with a property name as the only argument:

refX = myObject.ref('prop_name');

The object myObject must be instance of Core.QObject. By calling myObject.ref you create a reference that contains a subcription allowing this Pipe instance to track changes of prop_name and to invoke callback when it's been changed. The function callback can be declared either in place (as an anonymous function) or by reference to a named function in an external object.

Example

Suppose you want a static header to display a number range as "from X to Y", where X and Y can be defined in two input fields on the same page.

In QS, this can be expressed as follows:

Header myText: {{'from ' + input1.value + ' to ' + input2.value}} 

The same thing can be coded in JS in approximately the following way:

myText.set('value', new Pipe(
    input1.ref('value'),
    input2.ref('value'),
    function(value1, value2){
        return 'from ' + value1 + ' to ' + value2;
    }));