Templates
Your component's HTML. Simple as that. Honestly.
All components require a template which contains the HTML to be rendered.
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

Explicit Lookup

You can specify the path to your component's template using template.
component extends="cbwire.models.Component" {
template = "tasklist";
// template = "path/to/tasklist"; <--- Can use folders
// template = "tasklist.cfm"; <--- Can use .cfm if you like
}
In 1.x, you would define the template path using view but this has been deprecated and template should be used going forward.

Implicit Lookup

If you haven't defined your component's template using template, a template will be implicitly loaded based on the component'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.

Prevent Rendering

Within your component 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>
If an outer element is not detected, an OuterElementNotFoundexception is thrown.
You can use something other than <div></div>.
Export as PDF
Copy link
On this page
Explicit Lookup
Implicit Lookup
Prevent Rendering
Outer Element