Skip to content
slifszyc edited this page Dec 5, 2014 · 1 revision

View

The View base class is located under the lib/view directory.

This class is passed a template and the locals for that template.

/**
 * Constructor
 */

function View(template, locals) {
  if (!(this instanceof View))
    return inherit(template, View);

  this.template = template;
  this.locals = locals || {};
  this.build();
}

It uses component/dom to create the view's el along with the lib/render component to domify the passed template.

It uses component/inserted and component/removed to know when the template is either inserted or removed from the DOM and call oninsert and onremove respectively, they then call switchOn and switchOff if defined on the child view.

.bound(method)

It returns the method already bound to the view or it binds it to the view and then returns it.

View.prototype.bound = function(method) {
  if (!this._bound[method]) {
    this._bound[method] = this[method].bind(this);
  }

  return this._bound[method];
}

.bind(event, selector, fn, [capture])

First it binds the fn function to the view (if it's passed as a string) and then binds the DOM event on the selector to it.

View.prototype.bind = function (event, selector, fn, capture) {
  if ('string' === typeof(fn)) {
    fn = this.bound(fn);
  }
  return this.el.on(event, selector, fn, capture);
};

.unbind(event, selector, fn, capture)

It gets the bound function to the view (if passed as a string) and then unbinds it from the view.

View.prototype.unbind = function (event, selector, fn, capture) {
  if ('string' === typeof(fn)) {
    fn = this.bound(fn);
  }
  return this.el.off(event, selector, fn, capture);
};

.appendTo(el)

Appends this.el to el. Wrapper for dom#appendTo

View.prototype.appendTo = function(el) {
  return this.el.appendTo(el);
};

.refresh()

Empties this.el parentNode and renders this.el again inside it

View.prototype.refresh = function() {
  this.wrapper = this.wrapper || this.el[0].parentNode;
  if (!this.wrapper) return;
  o(this.wrapper).empty().append(this.render());
  return this;
};

.replace(el)

Empties el and appends this.el to it

View.prototype.replace = function(el) {
  this.wrapper = el;
  this.emit('replace', o(this.wrapper));
  return this.refresh();
};

.find(selector, context)

Wrapper for dom#find(selector, context)

View.prototype.find = function(selector, context) {
  return this.el.find(selector, context);
};