There are two main ways to conditionally display elements in requery-js: `if()` for conditional rendering and `show()` for toggling visibility.
Written By Joel
Last updated About 1 month ago
Using if()
The if()
method provides conditional rendering - elements are added or removed from the DOM based on the condition:
HTML
<div rq="message">
This content will be removed from the DOM when store.isVisible is true
</div>
JavaScript
defineComponent("my-component", {
store: {
isVisible: true
},
setup(component, props, store) {
component.query("message").if(() => store.isVisible);
}
})
Setup Function with if()
When using if()
, elements are completely removed and re-added to the DOM. This means any bindings or event listeners need to be re-initialised when the element is rendered. The setup function provides a way to handle this initialisation:
HTML
<div rq="user-info">
<div rq="name"></div>
<div rq="role"></div>
<button rq="button">Action</button>
</div>
JavaScript
defineComponent("my-component", {
store: {
isVisible: true,
user: {
name: "John",
role: "admin"
}
},
setup(component, props, store) {
component.query("user-info").if(
// Conditional function
() => store.isVisible,
// Setup function
(el) => {
// These bindings will be set up each time
// the element is rendered
el.query("name").text(() => store.user.name);
el.query("role").text(() => store.user.role);
// Event listeners will also be re-attached
el.query("button").on("click", () => {
// handle click
});
}
);
}
})
Using show()
The show()
method toggles an element's visibility using the CSS display property:
HTML
<div rq="message">
This content remains in the DOM but is hidden with display: none
</div>
JavaScript
defineComponent("my-component", {
store: {
isVisible: true
},
setup(component, props, store) {
component.query("message").show(() => store.isVisible);
}
})
if() vs. show()
The choice between if()
and show()
depends on your needs:
if()
is "real" conditional rendering:Elements are completely removed/added to the DOM
Child elements and event listeners are properly cleaned up
Higher toggle costs but no initial render cost if false
show()
is simpler:Elements always remain in the DOM
Only toggles the CSS display property
Lower toggle costs but elements are always rendered
Using rq-cloak
You can use the rq-cloak
attribute to prevent content flashing when the page initially loads.
CSS
You can define your own CSS rules for different rq-cloak
values. We recommend supporting both hidden
and invisible
values to handle different use cases.
hidden
sets the initial display property tonone
. This will cause layout shift when the element is displayedinvisible
sets the initial opacity to0
<style>
[rq-cloak="hidden"] {
display: none;
}
[rq-cloak="invisible"] {
opacity: 0;
}
</style>
HTML
<!-- Hide with display: none -->
<div rq="message" rq-cloak="hidden">
Content is hidden until ready
</div>
<!-- Hide with opacity: 0 -->
<div rq="another-message" rq-cloak="invisible">
Content is invisible until ready
</div>
Note
The rq-cloak
attribute is removed once the element's bindings are initialised, making it useful for preventing a flash of uninitialised content or creating smooth transitions.
Could not load article.
Could not load article.