view

A View is stuff you look at, to put it rather technically. Anything that has some underlying DOM node or tree can be represented as a sudo.View. The sudo.View Object provides a means for behavior to be encapsulated into an entity that intrinsically has knowlege of its role, defined by you.

###Constructing a View

Two optional arguments can be passed to a sudo.View:

var foo = new sudo.View('#bar', {baz: 'qux'});

####el

The first argument becomes the DOM element residing at view.el. If it is omitted, a DOM element is created outside of the DOM (a fragment), by default a 'div' (configurable via tagName in the second argument). This first argument, when included, should be a legal CSS selector.

There is more to this first argument, see the "setEl" section below.

####data

The second argument can be:

1. An object literal that will be set at this.data.
2. Nothing. No this.data for this View

###Subclassing View

Most of your projects view classes will be created this way, as a subclass of sudo.View with some custom functionality:

var Foo = function(el, data) {
  // do stuff before calling 'super' constructor
  this.construct(el, data);
  // do stuff after calling 'super' constructor
};

Foo.prototype = $.extend(Object.create(sudo.View.prototype), {
  bar: function bar() {
    // do some bar-ing
  },
  baz: function baz(qux) {
    // do some baz-ing with qux
  }
});

###setEl([el])

This method is called directly from the constructor with the first argument passed (if present), but can be called manually at any time to replace this object's el if you need to. The "el" argument can be:

• Any legal CSS selector
• A "raw" DOM Element
• Nothing

In the "nothing" case (the "el" argument is falsy), an el will be constructed and set at the same (this.el) location as if you had passed one. In this case the View will inspect this.data for a few pieces of information (if there is one):

1. tagName. Will default to 'div' if not found. Any legal DOM tagName can be used.

2. attributes. If found will be set on the newly created Element. Any legal attribute for a DOM Element may be used.

   var foo = new sudo.View(null, { tagName: 'aside', attributes: { id: 'bar', 'class': 'baz', 'data-qux': 'vot' } });

foo.el would then be an aside tag with at id of "bar", a class of "baz", and a data-qux of "vot".

###qs(selector)

If you want to find a specific element in this.el you can use the View Class qs convenience method which scopes all DOM querySelector queries to this Class' el:

this.qs('.foo').getAttribute('data-bar');

The nice thing about the above statement is that any elements with a class of 'foo' outside of the current view's el would not be found. qs is synonymous with this.el.querySelector.

###qsa(selector)

The same as above but scoping a querySelectorAll to this view's el. Remember that you will get back a nodeList from this operation, not a single Node.