In order for a controller to be available in your HTML you first need to register it.
Binder provides a registerControllers
function which is a thin wrapper around window.customElements.define
(the built in way to register custom elements).
import { registerControllers, Controller } from '/static/js/binder/binder.js';
class MyController extends Controller {};
registerControllers(MyController);
The HTML tag name can be set in a few ways.
static tag
on your controllerimport { registerControllers, Controller } from '/static/js/binder/binder.js';
class MyController extends Controller {
static tag = "my-tag";
};
registerControllers(MyController);
Controller.withTag
static methodimport { registerControllers, Controller } from '/static/js/binder/binder.js';
class MyController extends Controller {};
registerControllers(MyController.withTag("my-tag"));
import { registerControllers, Controller } from '/static/js/binder/binder.js';
class MyController extends Controller {};
// Controller name is converted to lower kebab case (eg. my-controller)
registerControllers(MyController);
Next: Rendering