asynccomponent enables us to rerender/defer parts of the UI based on events/timing without full page reload.
asynccore component does get loaded and displayed on initial pageload!
asynccore component accepts the following parameters:
asynccomponent needs an ID in order to resolve the correct content on an async HTTP request
rerender_onoption lets us define an event on which the component gets rerendered.
rerender_onoption lets you rerender parts of your UI asynchronously. But please consider that, if not configured differently, it
deferoption may be used in two ways:
defer: trueimplies that the content of the
asynccomponent gets requested within a separate GET request right after initial page load is done.
defer: 2000means that the content of the
asynccomponent gets requested within a separate GET request 2000 milliseconds after initial page load is done.
asynccomponent with activated
deferbehavior is not resolved within the first page load!
SomeModel.some_querydoes not get executed within the first page load and only will be called within the deferred GET request. This helps us to render a complex UI with loads of heavy method calls step by step without slowing down the initial page load and rendering of simple content.
loadingclass will automatically be applied, which can be used for CSS styling and animations:
asynccomponent to request its content directly after the page load or to delay the request for a given amount of time after the page load.
:deferexpects either a boolean or a integer representing the delay time in milliseconds. If
:deferis set to
asynccomponent will be rendered on page load and not deferred. If set to
trueit will request its content directly after the page load.
asynccomponent will be rendered asynchronously after page load.
defer: 500will delay the asynchronous request after page load of the
asynccomponent for 300ms and render the content afterwards.
asyncleverages the event hub and can react to emitted events. If it receives one or more of the with
:rerender_onspecified events it will asynchronously request a rerender of its content. The response will only include the rerendered html of the
asynccomponent which then replaces the current content of the
async. If you specify multiple events in
:rerender_onthey need to be seperated by a comma.
asynccomponent wrapping the paragraph receives the event and reacts to it by requesting its rerendered content from the server and replacing its content with the received html. In this case it will rerender after button click and show the updated time.