Polling Dashboard with data-query

A refresh interval on the query, with no timer to start, stop or clean up.

The plain Polling Dashboard owns an interval: init() starts it, destroy() clears it, and a flag pauses it. A data-query (Full build) declares the interval instead, with refresh: [3], and polls only while something on the page is bound to it, so leaving the view stops the polling by itself.

Live Demo

The demo runs in its own frame on the Full build. Open it on its own ↗

Source

<div data-component="metrics-board">
    <button data-action="refreshNow">Refresh now</button>
    <button data-action="toggleLive" data-bind="live ? 'Detach' : 'Attach'"></button>

    <div data-render="live">
        <div data-query="metrics">
            <template>
                <div>
                    <span data-bind="label"></span> <span data-bind="value + '%'"></span>
                    <div class="bar"><div data-bind-style="{ width: value + '%' }"></div></div>
                </div>
            </template>
        </div>
    </div>
</div>

<script>
wildflower.query('metrics', {
    from: '/api/metrics',
    key: 'id',
    refresh: [3]      // poll every 3 s while the board is on the page
});

wildflower.component('metrics-board', {
    state: { live: true },
    refreshNow() { wildflower.getQuery('metrics').refresh(); },
    toggleLive() { this.live = !this.live; }
});
</script>

Key Points

• refresh: [3] is the whole polling loop: the query re-fetches every three seconds and there is no interval to start in init() or clear in destroy()
• Polling follows the page, not a flag: the list binds with data-query="metrics", and when the last such element leaves the document (a route change, a closed panel, the detach button here) the query goes idle a few seconds later and the requests stop; bind it again and it fetches fresh and resumes. A computed that keeps reading the query would keep it awake, so a detached view should not read it
• Rungs combine: refresh: ['focus', 30] re-fetches when the tab regains focus and polls every 30 seconds otherwise, and 'fresh:30' keeps a tab flick from firing a request when the data is younger than 30 seconds
• Keyed rows update in place on every poll, so the bars animate through their CSS transition instead of being rebuilt; isStale is true while a poll is in flight and lastSync gives you the "synced 4s ago" label
• Needs the Full build; the plain pattern shows the same dashboard with a hand-run timer. The rung ladder, including server push, is in Freshness