Templates

Templates are the HTML section of your Components and consist of any 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>

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 default implicit rendering, we can tell CBWIRE where our component template is by defining a renderIt() method on our component and using the template() method.

component extends="cbwire.models.Component" {

    data = {};

    function renderIt() {
        return template( "someFolder.MyTemplate" ); // renders somefolder/MyTemplate.cfm    
    }

}

We can also pass parameters when calling template().

component extends="cbwire.models.Component" {

    data = {};

    function renderIt() {
        return template( "someFolder.MyTemplate", { "someVar": "value" } );
    }

}

In this case, someVar becomes available to our template.

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

Outer Element

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.

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

Data Properties

You can access your Data Properties from your component by calling the property name.

// wires/Greeter.cfc
component extends="cbwire.models.Component" {
    data = {
        "greeting": "Hello from CBWIRE"
    };
    
    function renderIt() {
        return template( "wires.greeter" );
    }
}

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

Computed Properties

You can access your Computed Properties from your component by calling the property name as a method.

// wires/Greeter.cfc
component extends="cbwire.models.Component" {

    function greeting() computed {
        return "Hello from CBWIRE";
    }
    
    function renderIt() {
        return template( "wires.greeter" );
    }
}

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

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>