Rescope

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

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

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

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>();

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

Typed Model

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

const m = createModel<PageModel>();

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

Then use the rescoped model within the Rescope children:

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

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

Configuration