Components

Last updated 7 months ago

Was this helpful?

Components

Overview

Components are sections of your application that you want to be reactive to user input.

Components can be as big or small as you like. For example, you may have a Signup form component that covers multiple steps or a simple button component that you reuse throughout your application.

Components are made up of , , , and a

// ./wires/Counter.cfc
component extends="cbwire.models.Component" {
    // Data properties
    data = {
        "counter": 0 // default value
    };
    // Action
    function increment() {
        data.counter++;
    }
    // Helper method also available to template
    function isEven() {
        return data.counter % 2 == 0;
    }
}

<!--- ./wires/counter.cfm --->
<cfoutput>
    <div>
        <h1>My Counter</h1>
        Counter: #counter#<br>
        Is Even: #isEven()#
        <button wire:click="increment">Increment</button>
    </div>
</cfoutput>

Rendering Components

You can render a component using the wire() method.

<!--- ./layouts/Main.cfm --->
<body>
    <div>
        #wire( name="ShowPosts" )#
    </div>
</body>

<!--- ./views/posts/index.cfm --->
<cfoutput>
    <h1>My Posts</h1>
    #wire( name="ShowPosts" )#
</cfoutput>

You can call wire() from within your ColdBox layouts, ColdBox views, and also from your component templates ( See Nesting Components ).

External Components

You can render wires from folders and subfolders outside of the default ./wires folder.

<cfoutput>
    <div>
        #wire( name="myFolder.MyComponent" )#
        #wire( name="myFolder.subFolder.MyComponent" )#
    </div>
</cfoutput>

You can also reference components within another ColdBox module by using the @module syntax.

<cfoutput>
    <div>#wire( name="MyComponent@myModule" )#</div>
</cfoutput>

Passing Parameters

You can pass data into a component as an additional argument using wire().

<body>
    <div>
        #wire( name="ShowPost", params={ "post": post } )#
        #wire( "ShowPost", { "post": post } )#
    </div>
</body>

By passing in parameters, you can create reusable UI components that are unique but similar in functionality. For example, you could make a button component that you reuse throughout your app.

Using Parameters

<!--- ./views/posts/index.cfm --->
#wire( "ShowPost", { title: "Post 1" } )#

// ./wires/ShowPost.cfc
component extends="cbwire.models.Component" {
    data = {
        "title": ""
    };
    function onMount( params ) {
        data.title = params.title;
    }
}

CBWIRE only executes onMount() once when the component is initially rendered. It is not executed for subsequent update requests of the component.

Auto Populating Data Properties

<!--- ./views/posts/index.cfm --->
#wire( name="ShowPost", params={ title: "Some title" } )#

component extends="cbwire.models.Component" {
    data = {
        "title": ""
    };
}

<cfoutput>
    <!--- outputs 'Title: Some title --->
    <div>Title: #title#</div>
</cfoutput>

Passed-in properties must have a data type of string, boolean, numeric, date, array, or struct.

Nesting Components

CBWIREController

There may be areas of your application where you need to use wire() but don't have access to it. You can use the CBWIREController object to insert wires anywhere you need.

// ./models/PageService.cfc
component {
    property name="CBWIREController" inject="CBWIREController@cbwire";

    function getRenderedTemplate(required event) {
        return CBWIREController.wire( "EditablePage", { contentKey: event.getCurrentRoutedUrl() } );
    }
}

PreviousCBWIRE CLI NextTemplates

Last updated 7 months ago

Was this helpful?

Overview

Components are sections of your application that you want to be reactive to user input.

Components are made up of , , , and a

// ./wires/Counter.cfc
component extends="cbwire.models.Component" {
    // Data properties
    data = {
        "counter": 0 // default value
    };
    // Action
    function increment() {
        data.counter++;
    }
    // Helper method also available to template
    function isEven() {
        return data.counter % 2 == 0;
    }
}

<!--- ./wires/counter.cfm --->
<cfoutput>
    <div>
        <h1>My Counter</h1>
        Counter: #counter#<br>
        Is Even: #isEven()#
        <button wire:click="increment">Increment</button>
    </div>
</cfoutput>

By default, components are placed in the ./wires folder in the project root. You can change this location using the wiresLocation .

Rendering Components

You can render a component using the wire() method.

<!--- ./layouts/Main.cfm --->
<body>
    <div>
        #wire( name="ShowPosts" )#
    </div>
</body>

<!--- ./views/posts/index.cfm --->
<cfoutput>
    <h1>My Posts</h1>
    #wire( name="ShowPosts" )#
</cfoutput>

You can call wire() from within your ColdBox layouts, ColdBox views, and also from your component templates ( See Nesting Components ).

External Components

You can render wires from folders and subfolders outside of the default ./wires folder.

<cfoutput>
    <div>
        #wire( name="myFolder.MyComponent" )#
        #wire( name="myFolder.subFolder.MyComponent" )#
    </div>
</cfoutput>

You can also reference components within another ColdBox module by using the @module syntax.

<cfoutput>
    <div>#wire( name="MyComponent@myModule" )#</div>
</cfoutput>

Passing Parameters

You can pass data into a component as an additional argument using wire().

<body>
    <div>
        #wire( name="ShowPost", params={ "post": post } )#
        #wire( "ShowPost", { "post": post } )#
    </div>
</body>

By passing in parameters, you can create reusable UI components that are unique but similar in functionality. For example, you could make a button component that you reuse throughout your app.

Using Parameters

Parameters are passed into your component's method. This is an optional method you can add.

<!--- ./views/posts/index.cfm --->
#wire( "ShowPost", { title: "Post 1" } )#

// ./wires/ShowPost.cfc
component extends="cbwire.models.Component" {
    data = {
        "title": ""
    };
    function onMount( params ) {
        data.title = params.title;
    }
}

CBWIRE only executes onMount() once when the component is initially rendered. It is not executed for subsequent update requests of the component.

Auto Populating Data Properties

Properties you pass into your component as params will be automatically populated if onMount() is not defined and a matching is found.

<!--- ./views/posts/index.cfm --->
#wire( name="ShowPost", params={ title: "Some title" } )#

component extends="cbwire.models.Component" {
    data = {
        "title": ""
    };
}

<cfoutput>
    <!--- outputs 'Title: Some title --->
    <div>Title: #title#</div>
</cfoutput>

Passed-in properties must have a data type of string, boolean, numeric, date, array, or struct.

Nesting Components

You can nest components as much as you need by simply calling wire() from within a ( See ).

CBWIREController

There may be areas of your application where you need to use wire() but don't have access to it. You can use the CBWIREController object to insert wires anywhere you need.

// ./models/PageService.cfc
component {
    property name="CBWIREController" inject="CBWIREController@cbwire";

    function getRenderedTemplate(required event) {
        return CBWIREController.wire( "EditablePage", { contentKey: event.getCurrentRoutedUrl() } );
    }
}