C&C Docs
Log in
Code

State in the URL or the session — $url · $session

Page state normally lasts as long as the page. Bind a key to $url and it lives in the query string: a reload, a shared link or the back button brings it back. Bind it to $session and it lives in a small signed cookie: it follows the visitor from page to page without showing in the address. Either way the server reads it before rendering, so the first HTML is already right.

In the address bar

$tab.push="$url.query.tab" reads ?tab= and writes it back when tab changes. .push leaves a back-button stop; without it the address changes in place. Click a tab, then press back, or open ?tab=settings&page=3 in a new tab. 

<!-- defaults in the controller: tab: 'overview', page: 1 -->
<div x-data $tab.push="$url.query.tab" $page="$url.query.page">
  <button @click="tab = 'activity'">activity</button>
  <button @click="page = page + 1">next page</button>
</div>
page 0

Showing overview.

In the session

$domain="$session.domain" works the same way. Pick one, then reload or visit another page and come back: the choice is still there, and the address never changed. The session is cleared at logout. Use it for short selections like this one; anything a user should keep belongs in a row. 

<!-- default in the controller: domain: '(none)' -->
<div x-data $domain="$session.domain">
  <button @click="domain = 'acme'">acme</button>
  <span x-text="domain"></span>
</div>

Selected: (none)