Computed Properties ( Proxied )

Create dynamic properties for your UI Wires.

You must be on CBWIRE version 2.3.5 or later and enable the Configuration setting useComputedPropertiesProxy to follow this guide.

Otherwise, please follow this guide instead.

In CBWIRE 2.3.5, we introduced the ability to proxy Computed Properties, which offers several advantages, including:

• Computed Properties are passed around as closures and are only rendered when called.

• The ability to invoke Computed Properties anywhere they are needed (both Actions and Templates).

• The ability to cache Computed Property results to enhance performance.

Computed Properties are dynamic properties and help derive 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 CFML value or object.

Defining Properties

Define Computed Properties in your Wires using computed.

component extends="cbwire.models.Component" {

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

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

Accessing From Actions

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

component extends="cbwire.models.Component" {

    // Computed Properties
    computed = {
        "allTasks": function() {
            // return something here
        }
    };

    // Action
    function deleteTasks() {      

        if ( arrayLen( computed.allTasks() ) {
            taskService.deleteAll();
        }

    }
}

Accessing From Templates

You can access Computed Properties in your Template using args.computed.[computedProperty]().

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