# Rescope

```ts
import { Rescope } from 'cx/ui';
```



Rescope selects a common prefix for data bindings, enabling shorter paths within its scope. This is useful when working with deeply nested data structures.

## Example

```tsx
import { createModel } from "cx/data";
import { Controller, LabelsTopLayout, Rescope } from "cx/ui";
import { TextField } from "cx/widgets";

interface Manager {
  name: string;
  email: string;
}

interface Team {
  manager: Manager;
  size: number;
}

interface PageModel {
  company: {
    name: string;
    team: Team;
  };
}

const m = createModel<PageModel>();

// Model for rescoped context (bound to company.team.manager)
const mManager = createModel<Manager>();

class PageController extends Controller {
  onInit() {
    this.store.set(m.company, {
      name: "Acme Corp",
      team: {
        manager: {
          name: "John Doe",
          email: "john@acme.com",
        },
        size: 10,
      },
    });
  }
}

export default (
  <div class="" controller={PageController}>
    <div class="text-sm">Without Rescope (long paths):</div>
    <div class="flex gap-4" layout={LabelsTopLayout}>
      <TextField value={m.company.team.manager.name} label="Manager Name" />
      <TextField value={m.company.team.manager.email} label="Manager Email" />
    </div>

    <div class="text-sm mt-8">With Rescope (short paths):</div>
    <Rescope bind={m.company.team.manager}>
      <div class="flex gap-4" layout={LabelsTopLayout}>
        <TextField value={mManager.name} label="Manager Name" />
        <TextField value={mManager.email} label="Manager Email" />
      </div>
    </Rescope>
  </div>
);

```

## Typed Model

When using Rescope, create a separate model proxy for the rescoped context:

```tsx
const m = createModel<PageModel>();

// Model for rescoped context
const mManager = createModel<Manager>();
```

Then use the rescoped model within the Rescope children:

```tsx
<Rescope bind={m.company.team.manager}>
  <TextField value={mManager.name} />
</Rescope>
```

## Accessing Outside Data

Within the scope, outside data can be accessed using the `$root.` prefix or by using the `data` property to explicitly bring in external bindings:

```tsx
<Rescope bind={m.team} data={{ companyName: m.company.name }}>
  <div text={mTeam.companyName} />
</Rescope>
```

## Configuration

| Property   | Type     | Description                                                   |
| ---------- | -------- | ------------------------------------------------------------- |
| `bind`     | `string` | Prefix path to be used for data binding. Defaults to `$page`. |
| `data`     | `object` | Outside data that will be carried into this scope.            |
| `rootName` | `string` | Alias used to expose root data. Defaults to `$root`.          |