DataProxy

import { DataProxy } from 'cx/ui';

The simplest use case for DataProxy is when we want to create an alias for a certain store binding. In the example below, level binding is also made available as $level. This creates a simple two-way mapping between the two store values. Moving one slider will affect the other.

Level

Level alias

DataProxy

<div class="widgets flex-row">
    <LabelsTopLayout>
        <Slider value-bind="level" label="Level" />
    </LabelsTopLayout>  
    <DataProxy
        value-bind="level"
        alias="$level"
    >
        <LabelsTopLayout>
            <Slider value-bind="$level" label="Level alias" />
        </LabelsTopLayout>
    </DataProxy>
</div>

Copied!Cx Fiddle

Defining multiple aliases

data property is used to define multiple mappings. data is an object whose property names serve as aliases, and their values are objects with expr and set properties that define custom getter and setter logic:

expr defines a getter logic and can be a Cx computable or an expression,
set is a function that receives the alias value and the instance object as parameters. The store can be accessed directly with destructuring assignment syntax. Note that the setter function needs to call the store.set method explicitly in order to set the level value, as opposed to just returning the calculated value. This is because we can use any number of store values to calculate the alias, and it's up to us to define the setter logic correctly.

Omitting the set property will make the alias itself a read-only. Attempting to change its value will log an error to the console, so the UI should not allow it.

Level

Inverted level

Level (read-only)

DataProxy

<FlexRow spacing="xlarge" align="start">
    <LabelsTopLayout>
        <Slider value-bind="level" label="Level" />
    </LabelsTopLayout>
    <DataProxy
        data={{
            $invertedLevel: {
                expr: computable("level", (v) => 100 - v),
                set: (value, { store }) => {
                    store.set("level", 100 - value);
                }
            },
            $level: {
                expr: "{level}"
            }
        }}
    >
        <FlexCol>
            <Slider value-bind="$invertedLevel" label="Inverted level" />
            <Slider value-bind="$level" label="Level (read-only)" />
        </FlexCol>
    </DataProxy>
</FlexRow>

Copied!Cx Fiddle

If mapping is done in both directions (both getter and setter are used), it is important that both operations are reversible, without any data loss. This means, for any alias value, we should be able to get back all of the store values that were used to calculate it. Failing to do so will cause bugs that are hard to detect.

Note: It is good practice to prefix the alias name with a $ sign in order to avoid unintentional name shadowing which will cause an infinite get-set loop and a Maximum call stack exceeded error.

Advanced example

Exposing currently selected Grid record for real time editing is a common use case for DataProxy.

Configuration

Property	Description	Type
alias	Alias for computed value.	string
data	Object whose property names serve as aliases, and their values are objects with `expr` and `set` properties that define custom getter and setter logic.	object
value	Cx binding, computable, expression or an object with `expr` and/or `set` properties.	object
immutable	Indicate that the data in the parent store should not be mutated. Defaults to `false`.	boolean
items children	List of child elements.	array
layout	Define an inner layout.	string/object
mod	Appearance modifier. For example, `mod="big"` will add the CSS class `.cxm-big` to the block element.	string/array
outerLayout	Defines the outer layout which wraps the widget.	widget
plainText	Set to `true` to avoid converting inner strings to templates. Default is `false`.	boolean
preserveWhitespace ws	Keep whitespace in text based children. Default is `false`. See also `trimWhitespace`.	boolean
putInto contentFor	Used with outer layouts. Specifies the name of the content placeholder which should render the widget.	string
trimWhitespace	Remove all whitespace in text based children. Default is `true`. See also `preserveWhitespace`.	boolean
vdomKey	Key that will be used as the key when rendering the React component.	string
visible if	Visibility of the widget. Defaults to `true`.	boolean

Documentation

DataProxy