Relations

When you work with DOM you use standard functions to get some element or its children, parent, change element place, remove it etc. Akili implements the similar system for components managing and interaction between them. So any component has special methods for that.

Component.prototype.matches(selector) boolean

  • selector string | function - native DOM selector or function. The function will take component as argument and should return boolean.

This function is necessary to check if the component matches the specified selector.

Component.prototype.parent(selector, levels) Component

  • [selector] string | function - native DOM selector or function. The function will take component as argument and should return boolean.
  • [levels] integer[] | integer - levels of nesting to find

This function returns the closest parent component.

Component.prototype.parents(selector, levels) Component[]

  • [selector] string | function - native DOM selector or function. The function will take component as argument and should return boolean.
  • [levels] integer[] | integer - levels of nesting to find

This function returns the list of parent components.

Component.prototype.child(selector, levels) Component

  • [selector] string | function - native DOM selector or function. The function will take component as argument and should return boolean.
  • [levels] integer[] | integer - levels of nesting to find

This function returns the closest child component.

Component.prototype.children(selector, levels) Component[]

  • [selector] string | function - native DOM selector or function. The function will take component as argument and should return boolean.
  • [levels] integer[] | integer - levels of nesting to find

This function returns the list of child components.

Component.prototype.prev(selector) Component

  • [selector] string | function - native DOM selector or function. The function will take component as argument and should return boolean.

This function returns the closest component on the left.

Component.prototype.before(selector) Component[]

  • [selector] string | function - native DOM selector or function. The function will take component as argument and should return boolean.

This function returns the list of components on the left.

Component.prototype.next(selector) Component

  • [selector] string | function - native DOM selector or function. The function will take component as argument and should return boolean.

This function returns the closest component on the right.

Component.prototype.after(selector) Component[]

  • [selector] string | function - native DOM selector or function. The function will take component as argument and should return boolean.

This function returns the list of components on the right.

Component.prototype.appendTo(element)

  • element HTMLElement - Parent element

This function changes component's element parent.

Component.prototype.empty()

This function removes the component's content.

Component.prototype.remove()

This function removes the component.

Relations and lifecycle

More about lifecycle is here.

class GrandParent extends Akili.Component {}  
class Parent extends Akili.Component {}
class Son extends Akili.Component {}
class Daughter extends Akili.Component {}
class Brother extends Akili.Component {}
class Sister extends Akili.Component {}

class Me extends Akili.Component {
  created() {
    /*
      here you have access to all previous and parent components, but they aren't compiled,
      you haven't access to children and next components, they don't yet exist
    */
  }

  compiled() {
    /*
      here all previous and parent components are compiled,
      you have access to children and next components, but they aren't compiled
    */
  }

  resolved() {
    // here you have access to any component and they all are compiled

    console.log(this.parent()); // Parent
    console.log(this.parents()); // [Parent, GrandParent, Root]
    console.log(this.parents('grand-parent')); // [GrandParent]
    console.log(this.parent((com) => com.el.tagName == 'GRAND-PARENT'))); // GrandParent 

    console.log(this.child()); // Son
    console.log(this.child('daughter')); // Daughter

    console.log(this.prev()); // Brother
    console.log(this.next()); // Sister
    console.log(this.before()); // [Brother]
    console.log(this.after()); // [Sister]
  }
}

Akili.component('me', Me);
Akili.component('son', Son);
Akili.component('daughter', Daughter);
Akili.component('parent', Parent);
Akili.component('grand-parent', GrandParent);
Akili.component('brother', Brother);
Akili.component('sister', Sister);

document.addEventListener('DOMContentLoaded', () => {
  Akili.init().catch((err) => console.error(err));
});
<body>
  <grand-parent>
    <parent>
      <brother></brother>
      <me>
        <son></son>
        <daughter></daughter>
      </me>
      <sister></sister>
    </parent>
  </grand-parent>  
</body>

If you need to find some element and functions above don't meet your requirements in your context, you always can use Akili.root component for that. So you can get any component using Akili.root.children function, for example.