Dynamically Adding Stimulus Controllers To Static Content Using Hotwire And Lucee CFML

index.cfm

<cfmodule template="./tags/page.cfm">
	<cfoutput>

		<h2>
			Welcome to My Site
		</h2>

		<div id="dyno">
			This is static content.
		</div>

		<p>
			<a href="javascript:( dyno.dataset.controller = 'dynamic-controller' );void(0);">
				Attach Controller
			</a>
		</p>

	</cfoutput>
</cfmodule>

main.js

// Import core modules.
import { Application } from "@hotwired/stimulus";
import { Controller } from "@hotwired/stimulus";
import * as Turbo from "@hotwired/turbo";

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

class DynamicController extends Controller {

	/**
	* I get called whenever this controller instance is bound to a host element.
	*/
	connect() {

		console.group( "Dynamic Controller" );
		console.log( "Connected!" );
		console.log( this.element );
		console.groupEnd();

		this.element.classList.add( "enhanced" );

	}

}

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

window.Stimulus = Application.start();
// When not using the Ruby On Rails asset pipeline / build system, Stimulus doesn't know
// how to map controller classes to data-controller attributes. As such, we have to
// explicitly register the Controllers on Stimulus startup.
Stimulus.register( "dynamic-controller", DynamicController );