18. Controlling Class
Instance via Firebug
• Creating a class instance with
optional parameters
• Inserting custom instances into the
DOM
• Accessing the public API of a class
instance
• Class instances maintain state
Thursday, February 19, 2009
20. Controlling Class
Instance via Firebug
• Creating a class instance with
optional parameters
• Inserting custom instances into the
DOM
• Accessing the public API of a class
instance
• Class instances maintain state
Thursday, February 19, 2009
21. But what does the
DOM look like?
Thursday, February 19, 2009
31. Standard DOM
Events
Function#bind(this)
Your best friend when using classes.
Allows referencing instance variables in an event listener.
Thursday, February 19, 2009
Big Bang Technology, June 2008, Max Cameron, iPhone, Web Dev, Flex Development, Bigbangtechnology.com
abstract away inconsitencies in browser.
each does it different
functionally equivalent
small differences in edge cases
interesting history.
one of the first modern JavaScript frameworks
designed to mimic the Ruby in the browser.
Interactive sophisticated programs in the browser.
Typically without page refreshes.
Most of those accomplishments go to jQuery, and I'd highly recommend using it for most simple JavaScript implementations.
* visual representation of the class instances
* events are bound
* loaded via ajax from a json feed
Creating a class instance with optional parameters
Inserting custom instances into the DOM
Accessing the public API of a class instance
Class instances maintain state regardless of whether they are in the DOM or not.
explain the html structure of the dom nodes
Object.extend overrides default options with whatever is passed into the constructor
If something isn’t passed in, the default value is used
you can take any DOM element and use the .insert method on it to insert custom classes as long as they implement toElement as an instance method.
Element is a class built just like Ninja. It takes two arguments, the tag name, and a hash of attribute values that you’d like to see on the element.
Update is an Element method that lets you add elements or text as children
if you don’t use bind on event listeners. “this” references the element that dispatched the event.
but we want to reference the class instance to access properties inside it.
interpolate makes adding variables to strings a lot easier
custom events need to be bound to dom elements.
use custom events for public methods that change the visual appearance of the class
iterate through the JSON to create new class instances for each record found.
typically would be database driven.
don’t forget to store a reference to the class instance or JavaScript will garbage collect it
Notice how the JSON feed is styled with the same key values as our class constructor options.