Templates

Your Wire's HTML. Simple as that. Honestly.

By default, Templates exist within your project under ./views/wires/[templateName].cfm. You can override the default template location with the configuration setting templatesLocation. See Configuration

Implicit Path

If you haven't specified your template file name inside your Wire using template, a template will be implicitly loaded based on the Wire's file name.

component extends="cbwire.models.Component" {
    // No template defined.
}

For the example above, the template ./views/wires/tasklist.cfm will be rendered.

File names should be lowercase when using Implicit Lookups. This is to avoid issues on case-sensitive file systems.

Explicit Path

You can specify the path to your Template using template.

component extends="cbwire.models.Component" {
    template = "wires/tasklist"; // This will look for ./views/wires/tasklist.cfm

    // template = "path/to/tasklist"; <--- Can use folders
    
    // template = "tasklist.cfm"; <--- Can use .cfm if you like
}

onRender

Instead of creating a .cfm template, you can define an onRender() method on your Wire.

See the Wire Lifecycle page for additional details.

Prevent Rendering

Within your Actions, you can call the method noRender() to prevent your template from re-rendering. This can reduce the returned payload size for actions that do not change the UI.

component extends="cbwire.model.Component"{
    // Action
    function updateSession(){
        // prevent UI updating
        noRender();
    }
}

Outer Element

Be sure your template includes a single outer element such as<div>.

<!--- GOOD --->
<cfoutput>
    <div>
        <button wire:click="addTask">Add Task</button>
    </div>
</cfoutput>

<!--- BAD --->
<cfoutput>
    <div>
        <button wire:click="addTask">Add Task</button>
    </div>
    <div>
        <h1>Tasks</h1>
    </div>
</cfoutput>

Last updated

Was this helpful?