Hierarchy / Roles

Each component may have a number roles, which determine its effects on their parents. To understand the value of roles, we can come up with a simple example.

Suppose we have a single form on the page, which can simultaneously log existing users in, but also create a new account. There are two fields - username and password - and two buttons, one for the "sign in" action and the other one for the "sign up" action. Clicking on either button invokes the appropriate action. In this case, it'd be rather wasteful to create two different Component classes for each button, rather a form should decide which request to send. But how would a form know which button was clicked then? Well, here come roles. We could have a sign_up role assigned to the "Sign Up" button and a sign_in role - to the "Sign in" button:

Note: you can assign more than one role by separating them with commas, for example: data-component-roles="role1,role2".

Then our buttons will have their .roles List contain the following (assuming ButtonComponent instances are in button1 and button2 variables):
button1.roles // => ["sign_up"]
button2.roles // => ["sign_in"]

Now, when a "click" event happens to either button, we can catch it and know which button it came from (see events section for a thorough explanation of events):

export class UserFormComponent extends extend_as("UserFormComponent").mix(Component).with( {

  constructor() {
    this.event_handlers.addForEvent("click", {
      sign_up: (self,p) => console.log("Sign up button clicked"),
      sign_in: (self,p) => console.log("Sign up button clicked")


Of course, in on a real application, you'd replace console.log() calls with an ajax request or some more complicated handlers. You can call other component's functions by referencing this component through self, which is passed to the handler function (this) wouldn't work, since we're inside an anonymous function).

Roles promote the idea of dumb components: the lower a component is in an hierarchy, the dumber it is. A button shouldn't know which request to send to the server when it's clicked, but a form this button is inside of should. The button's responsibility is to catch an event and notify the parent.