trigger and poll
Decide when a fetch element sends its request.
<div fetch="/api/stats" trigger="load visible" into="#stats.data"></div>
<input name="q" fetch="/api/search" trigger="input" debounce="250ms" into="#search.results">
<section fetch="/api/items" trigger="#filters.category, @user" into="#list.items"></section>
<div fetch="/api/feed" trigger="load" poll="30s" into="#feed.items"></div>trigger
A list of triggers separated by spaces or commas. Each one sends the request:
| Trigger | Sends when | Timed by debounce/throttle |
|---|---|---|
an event name (click, input, mouseenter, my-event, …) |
That event fires on the element | yes |
load |
Once, right after the element is set up | no |
visible |
The element enters the viewport (IntersectionObserver), each time it does |
no |
#state.path, @prop |
The referenced value changes (compared as JSON). Not on the first read | yes |
Default when trigger is absent:
| Element | Default trigger |
|---|---|
<form> |
submit |
<input>, <select>, <textarea> |
change |
| anything else | click |
Setting trigger replaces the default, so <form trigger="input"> no longer sends on submit (and still never submits natively).
poll
| Attribute | Type | Meaning |
|---|---|---|
poll |
duration | Also send the request every period, until the element is removed. Not timed by debounce/throttle |
poll does not send immediately. Combine it with trigger="load" to load first and then refresh.
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>trigger and poll demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
</head>
<body>
<import-element from="./section-filter.html"></import-element>
<section-filter></section-filter>
</body>
</html><custom-element name="section-filter">
<script>
const filter = useState({ section: "Docs", pages: [] });
const view = useState({
get matches() {
return filter.pages.filter((page) => page.section === filter.section).length;
},
});
</script>
<style>
:host {
display: flex;
flex-wrap: wrap;
gap: calc(var(--spacing) * 2);
align-items: center;
}
</style>
<select aria-label="Section" onchange="filter.section = this.value">
<option>Docs</option>
<option>Components</option>
<option>Reference</option>
</select>
<span fetch="http://realm.js.org/search-index.json" trigger="load, #filter.section" into="#filter.pages"></span>
<output><slot name="#view.matches"></slot> pages in <slot name="#filter.section"></slot></output>
</custom-element>The request runs on load and again whenever #filter.section changes.