CBWIRE
InstallSource CodeIssuesSupport
v2.x
v2.x
  • Introduction
  • Release History
    • What's New With 2.2
    • What's New With 2.1
    • What's New With 2.0
  • Getting Started
  • Examples
  • Essentials
    • Configuration
    • Wires
    • Data Properties
    • Computed Properties
      • Computed Properties ( Proxied )
    • Actions
    • Templates
    • Events & Listeners
    • Wire Lifecycle
    • JavaScript
    • Testing
  • Wire Features
    • Validation
    • File Uploads
    • Query String
    • Redirecting
    • Dependency Injection
  • Template Features
    • Directives
    • Loading States
    • Polling
    • Prefetching
    • Offline State
    • Defer Loading
    • Dirty State
  • Integrations
    • ContentBox CMS
    • Turbo
    • AlpineJS
    • Inline Scripts
Powered by GitBook
On this page

Was this helpful?

Export as PDF
  1. Template Features

Prefetching

Prefetch state changes when the user mouses over an HTML element. Fantastico!

PreviousPollingNextOffline State

Last updated 3 years ago

Was this helpful?

You can prefetch an results on mouseOver using the .prefetch modifier.

<div>
    <button wire:click.prefetch="togglePreview">Show Preview</button>

    <cfif args.showPreview>
        <!--- Preview goes here --->
    </cfif>
</div>
component extends="cbwire.models.Component"{

    data = {
        "showPreview": false
    };

    function togglePreview(){
        data.showPreview = true;
    }
}

In the example here, the togglePreview action will be prefetched and invoked when the user mouses over the button. The results of the fetch are not displayed until the user clicks the 'Show Preview' button.

Prefetching works well for actions that do not perform any side effects, such as mutating session data or writing to a database. If the action you are "pre-fetching" does have side effects, you may encounter unpredictable results.

Action's