Skip to content

Commit 95e735d

Browse files
author
Nils Henning
committed
[TASK] extend basic building blocks guide
1 parent b2372f6 commit 95e735d

File tree

1 file changed

+25
-1
lines changed
  • docs/guides/200-basic_building_blocks

1 file changed

+25
-1
lines changed

docs/guides/200-basic_building_blocks/README.md

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -525,12 +525,36 @@ To learn more, check out the [complete form documentation](/docs/api/100-compone
525525

526526
**async**
527527

528-
Read more about the [async component](/docs/api/100-components/async.md).
528+
The `async` component can be used to load or reload content asynchronously depending on page initialization or events. Simply wrap your content which you want to render asynchronously inside the `async` component. In order to load the content asynchronously after the initial page load use `defer: true` or pass in a number to delay the defer. To reload content you can use `:rerender_on` with an event name, leveraging the event hub, to reload the content if the specified event occurs. For example rerendering a list of todos beneath the form to create todos to instantly show new created objects. Remember events can also be used with action cable, which you could use for "real time" synchronization.
529+
530+
```ruby
531+
def response
532+
paragraph text: 'Time when you pressed the button'
533+
async id: 'current-time', rerender_on: 'update-time' do
534+
paragraph text: Time.now
535+
end
536+
onclick emit: 'update-time' do
537+
button text: 'Update Time'
538+
end
539+
end
540+
```
541+
542+
The above code snippet renders initially a paragraph and the current time followed by a button which emits the "update-time" event. The `async` component triggers an asynchronous request when the event is recieved, requesting it's content from the server. The server will respond with only the contents of the `async` components which is then replaced.
543+
544+
For more details on how to use the [async component](/docs/api/100-components/async.md) read the corresponding api doc.
529545

530546
**isolated**
531547

548+
Isolated components work similar to `async` components, but there are a few differences. Isolated components can not be called or used with a block like async, instead you need to create a custom component inheriting from `Matestack::Ui::IsolatedComponent`. Creation of the custom component works similar to other components, except you need to implement an `authorized?` method. This is needed because isolated components are resolved independently, they are not calling your app, page or anything else like `async` does. Therefore they need to resolve all data independently, but can access params to do so.
549+
550+
So isolated components are resolved completely indepentendly unlike async for which the whole page is executed but only the async block is rendered.
551+
552+
You can of course use every matestack component inside an isolated component, even `async` or another isolated component.
553+
532554
Read more about the [isolated component](/docs/api/100-components/isolated.md).
533555

534556
**collection**
535557

558+
559+
536560
Read more about the [collection component](/docs/api/100-components/collection.md).

0 commit comments

Comments
 (0)