LogoLogo
InstallSource CodeIssuesSupport
v1.x
v1.x
  • Introduction
  • Essentials
    • Installation
    • Configuration
    • Creating Components
    • Rendering Views
    • Data Properties
    • Actions
    • Events
    • Lifecycle Events
  • Component Features
    • Redirecting
    • Logging
  • Templates
    • Loading States
    • Polling
    • Prefetching
    • Offline State
    • Dirty States
    • Defer Loading
  • JS Integrations
    • AlpineJS
    • Inline Scripts
  • Testing
  • Security
  • Troubleshooting
  • CommandBox Commands
Powered by GitBook
On this page

Was this helpful?

  1. Templates

Prefetching

You can prefetch an action's results on mouseOver using the .prefetch modifier.

// File: ./views/wires/movie.cfm
<div>
    <button wire:click.prefetch="togglePreview">Show Preview</button>

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

    variables.data = {
        "showPreview": false
    };

    function togglePreview(){
        variables.data.contentIsVisible = true;
    }
    
    function renderIt(){
        return this.renderView( "wires/movie" );
    }
}

In the example here, cbwire will invoke ( prefetch ) the togglePreview action 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.

PreviousPollingNextOffline State

Last updated 3 years ago

Was this helpful?