Relations

When you work with DOM you use standard functions to get some element or children/parent, change the element place, remove it etc. Akili implements the similar system for components for interaction between them. All components have the specific methods for that.

Component.prototype.matches(selector) boolean

  • selector string | function - native DOM selector or a function. The function will take component as an argument and return a 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 a function. The function will take component as an argument and return a boolean.
  • [levels] integer[] | integer - levels of the nesting to find

This function returns the closest parent component.

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

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

This function returns the list of parent components.

Component.prototype.child(selector, levels) Component

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

This function returns the closest child component.

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

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

This function returns the list of child components.

Component.prototype.prev(selector) Component

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

This function returns the closest left component.

Component.prototype.before(selector) Component[]

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

This function returns the list of components left.

Component.prototype.next(selector) Component

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

This function returns the closest right component.

Component.prototype.after(selector) Component[]

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

This function returns the list of components right.

Component.prototype.appendTo(element)

  • element HTMLElement - Parent element

This function changes the element parent of the component.

Component.prototype.empty()

This function removes the content of the component.

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.children()); // [Son, 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>

The above methods are necessary when you create a group of components that are related to each other and perform some common function. If you need to share your application data between the different components use store.