Foundation.Elemental

Foundation.Elemental is a collection of methods to facilitate interaction between HTML elements and JavaScript objects. It does this through three primary methods.

The first two methods are related to each other and are used to help objects work with HTML elements. They are elementId and getElement. When your class inherits Foundation.Elemental, it can call these methods to generate unique ids for an HTML element and then get that element later.

For example, take the following simple class: 

var Person=Foundation.createClass(
   null,Foundation.Elemental, // Extends nothing, but inherits Foundation.Elemental.
   function(firstName,lastName) // This is the class constructor.
   {
      this.firstName=firstName;
      this.lastName=lastName;
   },
   {  // This is a comma-delimited list of methods.
      getHtml:function()
      {
         return "<input type=text id=\""+this.elementId("NameInput")+"\" value=\""+this.firstName.htmlEncode()+" "+this.lastName.htmlEncode()+"\"><br>";
      }
   });
A person class is defined, with a getHtml method that generates an INPUT element. To test, two instances will be created, and for each the getHtml method will be called and the HTML written to the document with the following script:
var john=new Person("John","Doe");
document.write(john.getHtml());

var jane=new Person("Jane","Doe");
document.write(jane.getHtml());
The results are the two INPUTs here:
Now the getElement can be called at any time to get the element that belongs to that object. For example, execute the following: 
alert(john.getElement("NameInput").value);
alert(jane.getElement("NameInput").value);

You can use as many ids for elements as needed. As long as each id is unique throughout your class, the ids are guaranteed to be unique throughout the page for each object, even if you have another class the uses the same id.

The elementId method can be used any time a unique string is needed, not just when creating HTML elements. A handy example escapes me at the moment though.

The third method, event, works in the opposite direction; it is used to help HTML elements work with objects. It generates the code necessary to reference an object from the global scope where HTML events occur.

For example, take the following similar class: 

var Person=Foundation.createClass(
   null,Foundation.Elemental, // Extends nothing, but inherits Foundation.Elemental.
   function(firstName,lastName) // This is the class constructor.
   {
      this.firstName=firstName;
      this.lastName=lastName;
   },
   {  // This is a comma-delimited list of methods.
      getHtml:function()
      {
         var html="";
         html+="<input type=button onclick=\""+this.event("shoutName()").htmlEncode()+"\" value=\"";
         html+="Click here to make ";
         html+=this.firstName.htmlEncode();
         html+=" shout";
         html+="\"><br>"
         return html;
      },
      shoutName:function()
      {
         alert("My name is "+this.firstName+" "+this.lastName+"!");
      }
   });

var jack=new Person("Jack","Doe");
document.write(jack.getHtml());

var jill=new Person("Jill","Doe");
document.write(jill.getHtml());
A person class is defined, with a method that generates a button element. Two instances were created, and for each the method was called and the HTML was written to the document, resulting in the two buttons here:
When you click on a button, the shoutName method is called for that object.

The event method can be used any time an object needs to be referenced from a global scope, not just for HTML elements. For example, the method can be used when calling window.setTimeout or window.setInterval, or as callbacks for AJAX methods like Foundation.server.

When your object has many sub objects, most often it is better to define elementId, getGlement and event methods for the subclass that call the methods of the parent object rather than inherit from Foundation.Elemental directly. For example, take a Person class that has a collection of Sock objects: 

var Person=Foundation.createClass(
   null,Foundation.Elemental, // Extends nothing, but inherits Foundation.Elemental.
   function(firstName,lastName,socks) // This is the class constructor.
   {
      this.firstName=firstName;
      this.lastName=lastName;
      this.socks=new Array();
      for (var i=0;i<socks.length;i++)
         this.socks[i]=new Sock(this,i,socks[i]);
   },
   {  // This is a comma-delimited list of methods.
      getHtml:function()
      {
         var html="";
         html+="Color of "+this.firstName.htmlEncode()+"'s socks: ";
         for (var i=0;i<this.socks.length;i++)
            html+=this.socks[i].getHtml();
         html+="<br>"
         return html;
      }
   });

var Sock=Foundation.createClass(
   function(person,index,color) // This is the class constructor.
   {
      this.person=person;
      this.index=index;
      this.color=color;
   },
   {
      elementId:function(id)
      {
         return this.person.elementId("sock_"+this.index+"_"+id);
      },
      getElement:function(id)
      {
         return this.person.getElement("sock_"+this.index+"_"+id);
      },
      event:function(code)
      {
         return this.person.event("socks["+this.index+"]."+code);
      },
      getHtml:function()
      {
         var html="";
         html+="<input type=button style=\"background-color:"+this.color+"\"";
         html+=" id=\""+this.elementId("colorspan")+"\"";
         html+=" onclick=\""+this.event("onclick()").htmlEncode()+"\"";
         html+=" value=\"Click me\">";
         return html;
      },
      onclick:function()
      {
         alert(this.getElement("colorspan").style.backgroundColor);
      }
   });

var jeff=new Person("Jeff","Doe",["green","blue"]);
document.write(jeff.getHtml());

var joan=new Person("Joan","Doe",["yellow","lime"]);
document.write(joan.getHtml());
Click on the colored buttons above to execute code. Note that the Sock class simply expanded on the methods of the parent object, it did not inherit them directly. This is best for sub objects that are transient in nature.