IsolatedScope

import {IsolatedScope} from 'cx/widgets';

IsolatedScope is a component used exclusively to improve performance by isolating certain areas from unnecessary recomputations. Contents of an isolated scope will change only if specified data change. Imagine a data declaration used to determine if underlying contents should update. This is commonly used with grids, charts or any other rich content that might cause performance issues for the rest of the page.

Heavy duty contents 1

Heavy duty contents 2

IsolatedScope

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

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

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
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

IsolatedScope