Templates

Overview

Templates are your components' HTML and consist of valid HTML/CFML tags. This includes <cfif>, <cfloop>, etc.

<cfoutput>
    <!--- HTML template goes here --->
    <div>
        <button wire:click="doSomething">Click here</button>
        <!-- Any valid CFML here -->
        <cfif datePart( 'h', now() ) lt 12>
            <p>Good morning!</p>
        <cfelse>
            <p>Good afternoon!</p>
        </cfif>
    </div>
</cfoutput>

Your templates must have a single outer element for CBWIRE to bind to your component and update the DOM properly. This can be any valid HTML element. Below, we are using a div element.

Below is a template with one outer element ( good ) and another with two outer elements ( bad ).

<cfoutput>
    <!--- GOOD: single outer element --->
    <div>
        <p>My awesome component</p>
    </div>
</cfoutput>

<cfoutput>
    <!--- BAD: 2 outer elements --->
    <div>
        My awesome component    
    </div>
    <div>
        <p>This won't work.</p>
    </div>
</cfoutput>

Implicit Rendering

By default, CBWIRE will look in the ./wires folder for a .cfm file with the same name as your component.

./wires/Counter.cfc <--- CFC file
./wires/Counter.cfm <--- Template file based on CFC name

You can change this default location in the configuration settings.

Explicit Rendering

To override the default implicit rendering, we can tell CBWIRE where our component template is by defining a onRender() method on our component and using the template() method.

// ./wires/MyTemplate.cfc
component extends="cbwire.models.Component" {
    function onRender() {
        return template( "someFolder.MyTemplate" ); // renders ./somefolder/MyTemplate.cfm    
    }
}

We can pass parameters when calling template().

// ./wires/MyTemplate.cfc
component extends="cbwire.models.Component" {
    function onRender() {
        return template( "someFolder.MyTemplate", { "someVar": "value" } );
    }
}

In this case, someVar becomes available to our template.

<!--- ./someFolder/MyTemplate.cfm --->
<cfoutput>
    <div>
        Somevar: #someVar#
    </div>
</cfoutput>

You can also return your template inline like so:

// ./wires/MyTemplate.cfc
component extends="cbwire.models.Component" {
    function onRender() {
        return "<div>My component</div>";
    }
}

Using Data Properties

You can access your data properties from your template by calling #propertyName#.

// ./wires/Greeter.cfc
component extends="cbwire.models.Component" {
    data = {
        "greeting": "Hello from CBWIRE"
    };
}

<!--- ./wires/greeter.cfm --->
<cfoutput>
    <div>
        Greeting: #greeting#
    </div>
</cfoutput>

Using Computed Properties

You define computed properties on your component by using the computed annotation.

function greeting() computed {}

// ./wires/Greeter.cfc
component extends="cbwire.models.Component" {
    function greeting() computed {
        return "Hello from CBWIRE";
    }
}

You access computed properties in your template by invoking the method.

<!--- ./wires/greeter.cfm --->
<cfoutput>
    <div>
        Greeting: #greeting()#
    </div>
</cfoutput>

Computed properties are cached are are executed when first called. See Computed Properties.

Using Helper Methods

You can access any global helper methods defined in your ColdBox application and any modules you have installed.

For example, suppose you've installed the cbi8n module ( an internalization module for ColdBox ). You can access its global helper methods in your template, such as the $r() method for displaying text in various languages.

<cfoutput>
    <div>
        #$r( "greeting" )#
    </div>
</cfoutput>

Visit ForgeBox to find ColdBox modules for your application.