@@ -573,6 +573,7 @@ turbo_boost.state[:key]
573
573
574
574
``` erb
575
575
<%
576
+ # view
576
577
turbo_boost.state[:key] = "value"
577
578
turbo_boost.state[:key]
578
579
#=> "value"
@@ -605,6 +606,7 @@ turbo_boost.state.now[:key]
605
606
606
607
``` erb
607
608
<%
609
+ # view
608
610
turbo_boost.state.now[:key] = "value"
609
611
turbo_boost.state.now[:key]
610
612
#=> "value"
@@ -616,7 +618,7 @@ turbo_boost.state.now[:key]
616
618
Client-State is a mutable version of the signed Server-State, wrapped in an observable JavaScript proxy.
617
619
This allows for sophisticated techniques like data binding via custom JavaScript, Stimulus controllers, or web components.
618
620
619
- Client-side state enables immediate UI updates, providing a fast and smooth user experience while the server
621
+ Client-State enables immediate UI updates, providing a fast and smooth user experience while the server
620
622
[ resolves state] ( #state-resolution ) differences whenever Commands are invoked.
621
623
622
624
Client-State can be accessed on the client like so.
@@ -630,7 +632,7 @@ TurboBoost.State.current['key']
630
632
### Page-State
631
633
632
634
Page-State is managed by the client and used to remember element attribute values between server renders.
633
- It’s best for tracking transient user interactions, like which elements are visible, open/closed, their position, etc.
635
+ It’s best for tracking transient user interactions, such as - which elements are visible, open/closed, their position, etc.
634
636
635
637
This enhances the user experience by maintaining the state of UI elements between renders.
636
638
When invoking commands, the client sends the Page-State to the server, allowing it to preserve element attributes when rendering.
@@ -645,13 +647,13 @@ You can opt-in to remember Page-State with Rails tag helpers via the `turbo_boos
645
647
<% end %>
646
648
```
647
649
648
- _ This remembers whether the ` details ` element is open or closed._
650
+ This will remember whether the ` details ` element is open or closed.
649
651
650
652
__ That's it!__ You're done.
651
653
652
654
> [ !NOTE]
653
- > Page-State tracking works with all element attributes, including ` aria ` and ` data ` ,
654
- > but elements must have a unique ` id ` to participate in Page-State tracking.
655
+ > Page-State tracking works with all element attributes, including ` aria ` , ` data ` , and even custom attributes.
656
+ > Elements must have a unique ` id ` to participate in Page-State tracking.
655
657
656
658
### State Resolution
657
659
0 commit comments