Links

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

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.

onRender

Instead of creating a .cfm template, you can define an onRender() method on your component. This method accepts an args argument where data properties and rendered computed properties are passed in.
component extends="cbwire.models.Component" {
// Data properties
data = {
"firstname": "Grant",
"lastname": "Copley"
};
// Computed Properties
computed = {
"fullName": function( data ) {
return data.firstname & " " & data.lastname;
}
}
// Render directly from component
// args contains our rendered data and computed properties
function onRender( args ) {
return "
<div>
<h1>Welcome #args.fullName#</h1>
<h2>Your first name is #args.firstname#</h2>
</div>
";
}
}

Template Path

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.

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>.