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 a function. The function will take component as argument and should return boolean.

Component.prototype.parent(selector, levels) Component

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

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

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

Component.prototype.child(selector, levels) Component

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

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

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

Component.prototype.prev(selector) Component

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

Component.prototype.before(selector) Component[]

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

Component.prototype.next(selector) Component

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

Component.prototype.after(selector) Component[]

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

Component.prototype.appendTo(element)

  • element HTMLElement - Parent element

Component.prototype.empty()

Component.prototype.remove()

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>

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.

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 just need to transfer your application data between the components, then use store.