abstract_view.js

/**
 * QUÉ ES ESTO
 * Una manera muy simple de organizar los eventos de una página de tal modo que no están
 * esparcidos por el código javascript. Inspirado en las vistas de backbone.js
 * 
 * POR QUÉ
 * De este modo los eventos que escucha tu página están declarados en un lugar evidente.
 * 
 * CÓMO USARLO
 * Crea una clase View que herede de AbstractView. Esta clase debe definir:
 * - una propiedad ''event'', con todos los eventos y callbacks.
 * - un ''initialize'', para inicializar la vista si fuera necesario, pero podría estar vacío igualmente.
 * - métodos callback para los eventos definidos.
 * Por supuesto, puedes definir más métodos si los necesitas.
 * Ver https://gist.github.com/dncrht/8158694 como referencia.
 * 
 * Al cargarse la página, la vista View es instanciada automáticamente.
 * 
 * REQUIERE
 * - jQuery con soporte para .on
 * - cargar en orden jQuery, abstract_view y nuestra view
 */

__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) {for (var key in parent) {if (__hasProp.call(parent, key)) child[key] = parent[key];} function ctor() {this.constructor = child;} ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child;};

AbstractView = (function() {
  function AbstractView() {
    this.initialize();
  }

  AbstractView.prototype.initialize = function() {
  }

  AbstractView.prototype.render = function() {
      for (var event_selector in this.events) {
        var event_selector_array = event_selector.split(' ');
        var event = event_selector_array.reverse().pop();
        var selector = event_selector_array.reverse().join(' ');
        if (selector == 'document') {
          var $selector = $(document);
        } else if (selector == 'window') {
          var $selector = $(window);
        } else {
          var $selector = $(selector);
        }

        var callback = eval('this.' + this.events[event_selector]).bind(this);
        $selector.on(event, callback);
      }
    }

  return AbstractView;

})();

$(document).ready(function() {
  view = new View
  view.render()
})