Nesting Components

BoxLang

// wires/ContactUs.bx
class extends="cbwire.models.Component" {
    data = {
        "showForm": false
    };  
}

CFML

// wires/ContactUs.cfc
component extends="cbwire.models.Component" {
    data = {
        "showForm": false
    };  
}

BoxLang

<!--- wires/contactus.bxm --->
<bx:output>
    <div>
        <bx:if showForm>
            <!--- Nested component --->
            #wire( name="ContactForm" )#
        </bx:if>    
        <button wire:click="$toggle( 'showForm' )">Toggle form</button>
    </div>
</bx:output>

CFML

<!--- wires/contactus.cfm --->
<cfoutput>
    <div>
        <cfif showForm>
            <!--- Nested component --->
            #wire( name="ContactForm" )#
        </cfif>    
        <button wire:click="$toggle( 'showForm' )">Toggle form</button>
    </div>
</cfoutput>

You can also pass parameters.

BoxLang

// wires/ContactUs.bx
class extends="cbwire.models.Component" {
    data = {
        "showForm": false,
        "sendEmail": false,
        "validateForm": true
    };  
    
    function onMount( params ) {
        data.sendEmail = params.sendEmail;
        data.validateForm = params.validateForm;
    }
}

CFML

// wires/ContactUs.cfc
component extends="cbwire.models.Component" {
    data = {
        "showForm": false,
        "sendEmail": false,
        "validateForm": true
    };  
    
    function onMount( params ) {
        data.sendEmail = params.sendEmail;
        data.validateForm = params.validateForm;
    }
}

BoxLang

<!--- wires/contactus.bxm --->
<bx:output>
    <div>
        <bx:if showForm>
            #wire(
                name="ContactForm"
                params={
                    sendEmail: true,
                    validateForm: true
                }
            )#
        </bx:if>
        <button wire:click="$toggle( 'showForm' )">Toggle form</button>    
    </div>
</bx:output>

CFML

<!--- wires/contactus.cfm --->
<cfoutput>
    <div>
        <cfif showForm>
            #wire(
                name="ContactForm"
                params={
                    sendEmail: true,
                    validateForm: true
                }
            )#
        </cfif>
        <button wire:click="$toggle( 'showForm' )">Toggle form</button>    
    </div>
</cfoutput>