gl-hook

gl-hook helps you hook onto changes on any variable and respond accordingly to them in your HTML.

Here is a basic example:

<div gl-hook="username:onUsernameChange"></div>
<input gl-bind="username" />

Controller.on("onUsernameChange", ([username]) => {
  if (username.length < 8) return "Your name should have at least 8 characters";

  if (username === "Test1234") return "This name is already taken";
  return;
});

Now, if the username is below 4 characters, it will change the div content with the returned value from the event handler.

It's a good practice to return nothing after all the checks to ensure that the div will no longer show.

Let's view the example: