async
components. Isolated components can be deferred or asynchronously rerendered like async
components. In difference to async
components, isolated components are resolved completely independently from the rest of the UI. If an isolated component gets rerendered or loaded, Matestack will directly render this component without touching the surrounding UI implementation. async
- in contrast - is executing the surrounding UI implementation in order to render the relevant UI part. On complex UIs this makes a difference performance wise!isolated
and resolve all data independently! That's why they can be rendered completely separate from the rest of the UI.async
componentasync
component offers pretty similar functionalities enabling you to define asynchronous rendering. The important difference is that rerendering an async
component requires resolving the whole page on the serverside, which can be performance critical on complex pages. An isolated component bypasses the page and can therefore offer high performance rerendering.async
component does NOT require you to create a custom component:async
rerendering would be performance critical or you simply wish to create cleaner and more decoupled code.Matestack::Ui::IsolatedComponent
. Implementing your component is straight forward. As always you implement a response
method which defines what gets rendered.:defer
or :rerender_on
options which work the same on async
components.authorized?
method to make sure, all isolated components take care of their authorization themselves.authorized?
returns true
, the component will be rendered. If it returns false
, the component will not be rendered.current_user
inside your isolated component, making authorization implementations as easy as:authorized?
method simply returning true
.authorized
methods for your use cases and thus keep your code DRY.true
the isolate component will not be rendered on initial page load. Instead it will be rendered with an asynchronous request only resolving the isolate component.defer
is set to true
the asynchronous requests gets triggered as soon as the initial page is loaded.defer
is set to a positive integer (including zero) the asynchronous request is delayed by the given amount in ms.rerender_on
options lets you define events on which the component will be rerenderd asynchronously. Events on which the component should be rerendered are specified via a comma seperated string, for example rerender_on: 'event_one, event_two
.rerender_delay
option lets you specify a delay in ms after which the asynchronous request is emitted to rerender the component. It can for example be used to smooth out loading animations, preventing flickering in the UI for fast responses.init_on
you can specify events on which the isolate components gets initialized. Specify events on which the component should be initially rendered via a comma seperated string. When receiving a matching event the isolate component is rendered asynchronously. If you also specified the defer
option the asynchronous rerendering call will be delayed by the given time in ms of the defer option. If defer
is set to true
the rendering will not be delayed.public_options
option. This data is inside the isolate component accessible via a hash with indifferent access, for example public_options[:item_id]
. All data contained in the public_options
will be passed as json to the corresponding Vue.js component, which means this data is visible on the client side as it is rendered in the Vue.js component config. So be careful what data you pass into public_options
!loading
class will automatically be applied, which can be used for CSS styling and animations:loading_state_element
within the component class like:defer
option both calls to the custom isolated components will not get rendered on initial page load. Instead the component with defer: true
will get rendered as soon as the initial page load is done and the component with defer: 2000
will be rendered 2000ms after the initial page load is done. Which means that the second component will show the datetime with 2s more on the clock then the first one.rerender_on: 'update_time'
tells the custom isolated component to rerender its content asynchronously whenever the event update_time
is emitted. In this case every time the button is pressed the event is emitted and the isolated component gets rerendered, showing the new timestamp afterwards. In contrast to async components only the MyIsolated
component is rendered on the server side instead of the whole UI.MyIsolated
component will be rerendered 300ms after the update_time
event is emittedinit_on: 'init_time'
you can specify an event on which the isolated component should be initialized. When you click the button the event init_time
is emitted and the isolated component asynchronously requests its content.public_options
and use them in your isolated component. Be careful, because public_options
are visible in the raw html response from the server as they get passed to a Vue.js component.Match
, representing a soccer match. It has an attribute called score with the current match score.public_options
options are passed to the client side Vue.js component. So if match two should be rerendered the client requests the match_isolated_score component with public_options: { id: 2 }
. With this information our isolated component can fetch the match and rerender itself.