CBWIRE
v4.x
v4.x
  • Introduction
  • How It Works
  • Getting Started
  • Configuration
  • Releases
    • What's New With 4.1
    • What's New With 4.0
    • What's New With 3.2
    • What's New With 3.1
    • What's New With 3.0
    • What's New With 2.2
    • What's New With 2.1
    • What's New With 2.0
  • Resources
  • Upgrading from CBWIRE 3.x
  • Upgrading from CBWIRE 2.x
  • CBWIRE CLI
  • The Essentials
    • Components
    • Templates
    • Data Properties
    • Computed Properties
    • Data Binding
    • Actions
    • Events
    • Nesting Components
    • Lifecycle Methods
    • JavaScript
    • Testing
  • Features
    • Single-file Components
    • Alpine.js
    • Lazy Loading
    • Form Validation
    • File Uploads
    • Query String
    • Redirecting
    • WireBox
  • Template Directives
    • wire:click
    • wire:confirm
    • wire:dirty
    • wire:ignore
    • wire:init
    • wire:key
    • wire:loading
    • wire:model
    • wire:navigate
    • wire:offline
    • wire:poll
    • wire:stream
    • wire:submit
    • wire:transition
  • Advanced
    • Troubleshooting
Powered by GitBook
On this page
  • Differences
  • Defining Computed Properties
  • Templates
  • Actions
  • Caching

Was this helpful?

Export as PDF
  1. The Essentials

Computed Properties

PreviousData PropertiesNextData Binding

Last updated 8 months ago

Was this helpful?

Computed Properties are dynamic properties that are cached per component rendering.

Differences

Computed Properties are similar to with some key differences:

  • They are declared as functions within your component with a computed attribute added.

  • They are cached.

  • They can return any CFML data type, not just values that can be parsed by JavaScript like .

Computed properties are meant to return values and not change state such as modifying . If you need to update a data property, use instead.

Defining Computed Properties

You can define Computed Properties on your components as functions with the computed attribute added.

component extends="cbwire.models.Component" {   

    // Computed property
    function isEven() computed {
        return data.counter % 2 == 0;
    }

}

Templates

You can access Computed Properties in your component template using propertyName().

<cfoutput>
    <div>
        Is Even: #isEven()#
    </div>
</cfoutput>

Actions

component extends="cbwire.models.Component" {   

    // Computed property
    function isEven() computed {
        return data.counter % 2 == 0;
    }
    
    // Action
    function increment() {
        if ( isEven() ) {
            data.counter += 2;
        } else {
            data.counter += 1;
        }
    }

}

Caching

Computed Properties cache their results for the lifetime of the request. It will only execute once if you reference your Computed Property three times in your component template or from within a component action.

// wires/UUID.cfc
component extends="cbwire.models.Component" {   

    // Computed properties
    function getUUID() computed {
        return createUUID();
    }

}
<!--- wires/uuid.cfm -->
<cfoutput>
    <div>
        <p>#getUUID()#</p>
        <p>#getUUID()#</p> <!-- Outputs the same ID because of caching -->
    </div>
</cfoutput>

You can prevent caching on a computed property by passing a false argument when invoking it.

<!--- wires/uuid.cfm -->
<cfoutput>
    <div>
        <p>#getUUID()#</p>
        <p>#getUUID( false )#</p> <!-- Does not have the same ID because caching disabled -->
    </div>
</cfoutput>

You can also access Computed Properties from within your .

Data Properties
Data Properties
Data Properties
Actions
Actions