Computed Properties

Create dynamic properties for your UI Wires.

If you are on CBWIRE version 2.3.x and have enabled the configuration property useComputedPropertiesProxy, then you will need to follow this guide here instead as this fundamentally changes how computed properties are referenced and accessed.

Computed Properties are dynamic properties and are helpful for deriving values from a database or another persistent store like a cache.

Computed Properties are similar to Data Properties with some key differences:

• They are declared as inline functions using computed.

• They can return any type of CFML value or object, not just values that can be serialized and parsed by JavaScript like Data Properties.

See the Wire Lifecycle page for details on when Computed Properties are executed.

Computed Properties are cached for the lifetime of the request. Meaning, if you reference your Computed Property three times in your Template or from within a wire Action, it will only execute once.

Defining Properties

You can define Computed Properties on your Wires using computed. Each Computed Property is invoked only once during a single request cycle.

component extends="cbwire.models.Component" {

    property name="taskService" inject="taskService@myapp";

    // Computed Properties
    computed = {
        "allTasks": function() {
            return taskService.getAll();
        }
    };
}

Accessing Properties

You can access your Computed Properties from within your Actions using computed.[propertyName].

component extends="cbwire.models.Component" {

    property name="taskService" inject="taskService@myapp";

    // Computed Properties
    computed = {
        "allTasks": function() {
            return taskService.getAll();
        }
    };

    // Action
    function deleteTasks() {
        
        // Notice below we don't invoke the method using computed.allTasks().
        // We instead just use 'computed.allTasks'.
        // At this point, cbwire has rendered our computed properties
        // and overwritten the references with their result.
        if ( arrayLen( computed.allTasks ) {
            taskService.deleteAll();
        }

    }
}

Getters

Getters are automatically created based on the property's name.

In the example below, you to access the property using this.getAllTasks(). You can use this as an alternative to using computed.

component extends="cbwire.models.Component" {

    property name="taskService" inject="taskService@myapp";

    // Computed Properties
    computed = {
        "allTasks": function() {
            return taskService.getAll();
        }
    };

    // Action
    function deleteTasks() {
        if ( arrayLen( this.getAllTasks() ) {
            taskService.deleteAll();
        }
    }
}

Templates

You can access Computed Properties in your Template via the args scope.

<cfoutput>
<div>
    <ul>
        <cfloop array="#args.allTasks#" index="task">
            <li>#task#</li>    
        </cfloop>
    </ul>
</div>
</cfoutput>