A component is an object wrapper for part of the DOM tree. In interface terms, it's a piece of the page you wish to model and create behavior for.

You define a component type by declaring the name by which it is identified in your markup in an HTML class or id attribute:

<ul id="friends">
  <li class="first friend">
    <img class="thumb" src="/images/1.jpg" />
  </li>
  <li class="last friend">
    <img class="thumb" src="/images/2.jpg" />
  </li>
</ul>

bind('friend', {
  // behavior for blocks where the container is #friend or has class .friend
});

bind('friends', {
  // behavior for blocks where the container is #friends or has class .friends
});

So the above markup will yield one instance for 'fiends' and two for 'friend'.

To perform some initialization on a component, define a method called run; this is called as soon as a component's content is ready.

A component has properties that allows you access it's controls, which can then be targets for event listeners, as well a parent/child components:

• friends.friend refers to the first child 'friend'.
• friends.friend.friends refers to the parent 'friends'.
• friends.first, friends.last and friends.friend.thumb refer to elements (since these names are not component types).

These properties are managed by the framework. For further explanation, see ControlOrComponent.

You can also access other components with:

• first(name), last(name) Return the first/last component instance of name anywhere inside this container (i.e. not necessarily a direct child).
• prev(horizontal), next(horizontal) Return the preceding or proceeding instance of this type in the page. If horizontal is true, only return an instance belonging to the current parent.

Examples:

<div class="x">
    <div id="a" class="z">
        <div id="b" class="y"></div>
    </div>
    <div id="c" class="y">
        <div id="d" class="z">
    </div>
    <div id="e" class="z"></div>
</div>

bind('z');
bind('y');
bind('x', {

  run: function() {
    // #a:
    this.z;

    // #b
    this.z.y;
    this.first('y');

    // #c
    this.y;

    // #d
    this.y.z;
    this.z.next();

    // #e
    this.last('z');
    this.z.next(true);
  }
});

To operate on collections:

• collect(name) Return a document-ordered array of all the components within this container that have the given name.
• each(name, callback) Applies callback for each component with the given name in this subtree, or until callback returns a value other than false. Returns the first value returned by callback that did not evaluate to false.

Examples:

bind('article');

bind('articles', {

  find: function(id) {
    return this.each('article', function() {
      if (this.element.id == id)
        return this;
    });
  },

  count: function() {
    return this.collect('article').length;
  }
});