Skip to content

Commit

Permalink
Improve computed example in guide
Browse files Browse the repository at this point in the history
  • Loading branch information
bencroker committed Jan 20, 2025
1 parent 0a10575 commit f1ccdc0
Showing 1 changed file with 8 additions and 8 deletions.
16 changes: 8 additions & 8 deletions site/static/md/guide/getting_started.md
Original file line number Diff line number Diff line change
Expand Up @@ -118,25 +118,25 @@ The value of the `data-text` attribute is a [Datastar expression](/guide/datasta
The [`data-computed`](/reference/attribute_plugins#data-computed) attribute creates a new signal that is computed based on an expression. The computed signal is read-only, and its value is automatically updated when any signals in the expression are updated.

```html
<div data-signals-input="''" data-computed-repeated="$input.repeat(2)">
<input data-bind-input />
<div data-text="$repeated">
Will be replaced with the contents of the repeated signal
</div>
</div>
<input data-bind-input />
<div data-computed-repeated="$input.repeat(2)">
<div data-text="$repeated">
Will be replaced with the contents of the repeated signal
</div>
</div>>
```

This results in the `$repeated` signal's value always being equal to the value of the `$input` signal repeated twice. Computed signals are useful for memoizing expressions containing other signals.

<div data-signals-input3="''" data-computed-repeated="$input3.repeat(2)" class="flex items-start justify-between p-8 alert">
<div class="flex items-start justify-between p-8 alert">
<div class="flex flex-col gap-4">
<div class="flex items-center">
<div class="w-20">Input:</div>
<input data-bind-input3 class="input input-bordered" />
</div>
<div class="flex items-center">
<div class="w-20">Output:</div>
<div data-text="$repeated" class="output"></div>
<div data-computed-repeated="$input3.repeat(2)" data-text="$repeated" class="output"></div>
</div>
</div>
</div>
Expand Down

0 comments on commit f1ccdc0

Please sign in to comment.