Writing an application with Components starts with identifying the cohesive pieces of your interface. Looking at markup, we distinguish between two kinds of names:

• Those that identify a component
• Those that identify a control (an element that we need access to, most likely as the target of some event)

<div class="dialog">
  <a class="close" href="#">Close</a>
  <span class="message">Have a nice day</span>
</div>

bind('dialog', {
  
  run: function() {
    this.close;   // 'Close'
    this.message; // 'Have a nice day'
  },
  
  onClickClose: function() {
    this.fade(true);
  }
});

Here .dialog is a component, while .close and .message are controls.

The rule is that each component should only have/need one instance of each kind of control (there would be no point in having a second close button). If you find yourself needing to operate on multiple instances of a control then it probably should be a component instead.

Lets say you have a navigation menu with several links. When the user clicks a link, you want to select it in order to apply some highlight style. It might look like this:

<div id="nav">
    <a href="one.html">One</a>
    <a href="two.html">Two</a>
    <a href="three.html">Three</a>
</div>

The question is, "how do I write code that applies .selected the clicked link? There are several links, and Components only gives me access to the first one!"

The problem is we are missing a component for the navigation items. They aren't controls, since we need to operate on them as a collection. So we need to include them in the model:

<div id="nav">
    <a class="item" href="one.html">One</a>
    <a class="item" href="two.html">Two</a>
    <a class="item" href="three.html">Three</a>
</div>

Then we can write:

bind('nav');

bind('item' {

    onClick: function() {
        this.nav.select(this);
    }
});

You shouldn't be afraid of adding class names to the markup - more names make a clearer application, more lines of JavaScript to process the links do not.

Summary

• Use more class names and less JavaScript
• Things that are operated on as a collection should be/are components