The style we took in these widgets builds on top of jQuery, and makes use of HTML5 data-* attributes to hook into the DOM. Each widget has a container, defined by an HTML element with an id attribute. Within this container is a mixture of structural elements to define the look, and semantic elements marked up with a data-role. The data-role attribute delimits the particular aspect of functionality the element fulfills.
This can then be built into a widget by defining a top-level container selector, and then scoping all other DOM manipulation by this top-level selector.
The widget can now use the
$titlemethod internally and use the full jQuery API to manipulate it, safe in the knowledge that there won't be unintended conflicts with other widgets using similar roles in other parts of the screen.
appobject is the root of the widget hierarchy, and provides access to the DOM (through
@app.$). More on this in a different post.
Edit 11th Feb 2012:
Altered post title to include 'Part 1: DOM Manipulation' as I'm turning this into a set of posts.
Added disclaimer about coffeescript examples.