Templates

The HTML that makes up your components.

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

Rendering Templates

We tell CBWIRE where our component template is by defining a renderIt() method and using template().

component extends="cbwire.models.Component" {

    data = {};

    function renderIt() {
        return template( "wires.mytemplate" ); // renders wires/mytemplate.cfm    
    }

}

You also can render HTML without calling view().

component extends="cbwire.models.Component" {

    data = {};

    function renderIt() {
        return "<div>My HTML here</div>";
    }

}

Outer Element

Your templates must have a single outer element for CBWIRE to properly bind to your component and update the DOM. 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>

Accessing Data Properties

You can access your Data Properties from your template 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>

Accessing Computed Properties

You can access your Computed Properties from your template 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, if 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>