SimpleSelection

import { SimpleSelection } from 'cx/ui';

SimpleSelection is the most basic selection model. It stores the entire selected object in the bound variable. Only single selection is supported.

When to Use

Simple single-select scenarios
When you need immediate access to the full selected object
Quick prototyping or simple lists

Note that selection is lost if the selected object changes in the data source, since the reference will no longer match. For more robust selection, consider KeySelection.

Example

 <div controller={PageController} class="flex flex-col gap-4">
  <List
    records={m.items}
    selection={{
      type: SimpleSelection,
      bind: m.selection,
    }}
  >
    <div text={m.$record.name} />
  </List>
  <div class="p-3 bg-muted rounded text-sm">
    <strong>Store content</strong>
    <pre
      class="mt-2"
      text={(data) => JSON.stringify({ selection: data.selection }, null, 2)}
    />
  </div>
</div> 
 class PageController extends Controller<PageModel> {
  onInit() {
    this.store.init(m.items, [
      { id: 1, name: "Apple" },
      { id: 2, name: "Banana" },
      { id: 3, name: "Cherry" },
      { id: 4, name: "Date" },
    ]);
  }
} 
 interface Item {
  id: number;
  name: string;
}

interface PageModel {
  items: Item[];
  selection: Item;
  $record: Item;
}

const m = createModel<PageModel>(); 
 import { createModel } from "cx/data";
import { SimpleSelection, Controller } from "cx/ui";
import { List } from "cx/widgets"; 

Apple
Banana
Cherry
Date

Store content

{}

Configuration

Property	Type	Default	Description
`bind`	`Prop<any>`	—	Binding for the selected object
`toggle`	`boolean`	`false`	Enable toggle mode (clicking selected item deselects it)