My favorites | Sign in
Project Home Downloads Wiki Issues Source
Search
for
Flags  
Class names for flagging component state
Featured, Phase-Implementation
Updated Sep 5, 2008 by adambo...@gmail.com

A flag is a class name that you add/remove from a component using apply(name) and clear(name), typically inferring some change in a component's state on the page.

Unlike normal names which create accessor properties, flags are booleans:

bind('category', {

  run: function() {
    this.apply('empty'); // class="empty category"
    this.empty; // true

    this.apply('promoted'); // class="promoted empty category"
    this.empty && this.promoted; // true

    this.clear('empty'); // class="promoted category"
    this.empty; // false
  }
});

A very common case is that in which we wish to apply a class name that identifies a single component within the subsection of the page, for example, the link for the currently-viewed page in a navigation menu. For this we use select(component):

bind('nav');

bind('item', {
  
  onClick: function() {
    this.nav.select(this); // class="selected item"
    
    this.selected; // true
    this.nav.selected; // this
  }
});

select(component) clears the selected flag from the currently selected component if there is one, and then sets it for the given component, also creating a reference to that component with this.selected.


Sign in to add a comment
Powered by Google Project Hosting