Skip to content

Commit

Permalink
update morph action inner html option
Browse files Browse the repository at this point in the history
  • Loading branch information
omarluq committed Mar 15, 2024
1 parent 8c00daf commit 95a062d
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 1 deletion.
8 changes: 8 additions & 0 deletions _source/handbook/05_streams.md
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,14 @@ A Turbo Streams message is a fragment of HTML consisting of `<turbo-stream>` ele
<li>New item</li>
</template>
</turbo-stream>

<turbo-stream action="morph" target="current_step" children-only>
<template>
<!-- The contents of this template will replace the
children of the element with ID "current_step" via morph. -->
<li>New item</li>
</template>
</turbo-stream>
```

Note that every `<turbo-stream>` element must wrap its included HTML inside a `<template>` element.
Expand Down
11 changes: 10 additions & 1 deletion _source/reference/streams.md
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,16 @@ Replaces the element designated by the target dom id via morph.
</template>
</turbo-stream>
```
A `data-turbo-morph-style="innerHTML"` attribute can be added to element designated with the dom_id to morph its inner content only.

The `children-only` attribute can be added to the `turbo-stream` element to morph only the children of the element designated by the target dom id.

```html
<turbo-stream action="morph" target="dom_id" children-only>
<template>
Content to replace the element.
</template>
</turbo-stream>
```

## Targeting Multiple Elements

Expand Down

0 comments on commit 95a062d

Please sign in to comment.