Home Docs Gallery Fiddle
versionCodeSandbox

Documentation

IntroConceptsWidgetsChartsExamples
Basic
StoreWidgetsData BindingControllersInner LayoutsCSSFormattingSelection
Basic
Data Views
RepeaterRescopeSandboxData ProxyPrivate Store
Data Views
Advanced
RouterOuter LayoutsFunctional ComponentsLocalizationChartsDrag & DropData AdaptersKeyboard ShortcutsTyped ModelsImmer.js IntegrationCreating ComponentsCx Component
Advanced
Report Edit

Rescope

import { Rescope } from 'cx/ui';

The Rescope widget enables shorter data binding paths by selecting a common prefix.

John Doe (18 years of work experience)
- Leading the team of 10 people
ControllerRescope
<Rescope bind="company.specificTeam">
    <Text tpl="{manager.name} ({manager.yoe} years of work experience)" />
    <br />
    <Text tpl="- Leading the team of {size} people" />
</Rescope>
Copied!Cx Fiddle

Within the scope, outside data may be accessed by using the $root. prefix. For example, manager and $root.company.specificTeam.manager point to the same object.

Data property

Rescope's data property allows access to the outside data without having to use the $root. prefix.

Company Address 1AB
John Doe (18 years of work experience)
- Leading the team of 10 people
ControllerRescope
<Rescope
    bind="company.specificTeam"
    data={{ address: bind("company.address") }}
>
    <Text tpl="{address}" />
    <hr />
    <Text tpl="{manager.name} ({manager.yoe} years of work experience)" />
    <br />
    <Text tpl="- Leading the team of {size} people" />
</Rescope>
Copied!Cx Fiddle

Configuration

PropertyDescriptionType
bind

Prefix path to be used for data binding. Defaults to $page.

string
data

Outside data that will be carried into this scope.

object
rootName
rootAlias

Alias used to expose root data. Defaults to $root.

string