gl-on

gl-on helps you react to dispatched DOM events.

Here is an example on how to react to form submits.

<form gl-on="submit:onLogin">
  <input type="email" gl-bind="email" />
  <input type="password" gl-bind="password" />
  <button type="submit">Login</button>
</form>

MyController.on("onLogin", (e) => {
  e.preventDefault(); // So it doesn't refresh the page

  const email = MyController.$store.get("email");
  const password = MyController.$store.get("password");

  console.log(`Your email is ${email} and your password is ${password}.`);
});

Syntax

To use gl-on you need 2 things: a DOM event and an event name for your controller to call. They will be separated by a :. Here is an example.

<button gl-on="click:onButtonClick"></button>

So when the button fires a click event, the controller will call the listeners for onButtonClick.

// The function provided will be executed every time the button is clicked
Controller.on("onButtonClick", () => alert("clicked it!"));