DetachedScope

import {DetachedScope} from 'cx/widgets';

DetachedScope is a component used exclusively to improve performance by detaching certain areas from the rest of the page. Detached contents render in their own render loop and use a data declaration which explains which changes can go in or out. This is commonly used to ensure optimal performance with rich popups, grids, charts and other interactive structures that might be negatively affected by other "heavy" elements visible on the page.

Heavy duty contents 1

Heavy duty contents 2

DetachedScope

<DetachedScope bind="$page.scope1">
    <div style="width: 150px; height: 150px; background: #d4d4d4; padding: 20px">
        Heavy duty contents 1
    </div>
</DetachedScope>

<DetachedScope bind="$page.scope2">
    <div style="width: 150px; height: 150px; background: #d4d4d4; padding: 20px">
        Heavy duty contents 2
    </div>
</DetachedScope>

Copied!Cx Fiddle

Configuration

Property	Description	Type
bind	A single binding path or a list of paths to be monitored for changes. Use `bind` as a shorthand for defining the `data` object.	string\|array
data	Data object selector. The children will update only if `data` change.	object
exclusive	A single binding path or a list of paths to be monitored for changes. Use `exclusive` as a shorthand for defining the `exclusiveData` object.	string\|array
exclusiveData	Exclusive data selector. If only exclusive data change, the scope will be re-rendered without recalculating other elements on the page. Use in case if the scope uses both exclusive and shared data.	object
name	Name of the scope used for debugging/reporting purposes.	string
items children	List of child elements.	array
layout	Define an inner layout.	string/object
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

DetachedScope